Galeria De Imagens Espectacular Com Super Efeitos jQuery

Uma galeria de imagens dá outro estilo ao site e torna-o mais atraente. É uma montra de tudo o que você quer mostrar aos seus visitantes. Eu criei esta galeria de imagens baseada em jQuery com alguns efeitos animados. Usei a função animate() do jQuery para esta galeria e é simples de usar. Espero que você goste do tutorial. Outro efeito que eu usei é o efeito hover. Com o efeito hover, as imagens a preto a branco mudam para imagens a cor.

Veja aqui uma DEMO desta Galeria De Imagens Com Efeitos jQuery. Pode descarregar o código no fim do tutorial.

Código jQuery do Efeito Hover


$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Você precisa de 3 versões da mesma imagem: uma versão pequena a preto e branco, uma versão pequena a cores e uma versão maior a cores. Quando você passa o rato por cima da imagem pequena a preto e branco, a imagem muda para a imagem pequena a cores. Quando você clica na imagem pequena a preto e branco, a imagem grande a cores carrega no frame.

Código jQuery Para Criar As Animações

$( init );
var num =0;
function init() {

$('img.a').click( function() {

var num = Math.floor(Math.random()*15);

hideImage(num);

var id = $(this).attr("id");

$('#'+id+'image').animate( {
bottom: '0px',
width: '500px',
height: '302px',
opacity: 1,
},300 );

} );
}
function hideImage(num)
{
if(num%2 == 0)
{
$('img#1image').width(0).hide();
$('img#2image').width(0).hide();
$('img#3image').width(0).hide();
$('img#4image').width(0).hide();
$('img#5image').width(0).hide();
$('img#6image').width(0).hide();
}
else
{
$('img#1image').height(0).hide();
$('img#2image').height(0).hide();
$('img#3image').height(0).hide();
$('img#4image').height(0).hide();
$('img#5image').height(0).hide();
$('img#6image').height(0).hide();
}
}

Código HTML












1 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
3 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
4 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Image one.
5 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
6 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.

Download do código usado neste tutorial: Galeria De Imagens Espectacular Com Super Efeitos jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)

8 Responses

  1. Olá
    Parabens pelo tutorial

    Você poderia explicar como faço pra usar esse código no wordpress?

  2. Muito bom. Eu gostaria de ser abusado o suficiente para perguntar onde posso conseguir um código pronto, de uma galeria similar à esta aqui, mas com paginação e área de administração para poder gerenciar as imagens/textos.

    Grato, Andrei – habigzang@gmail.com.

  3. Olá, uso o blogger e tentei colocar parte do codigo jQuery do Efeito Hover,mas não tive um resultado positivo, e gostaria muito de ter esse efeito em imagens que utilizo na web. Poderia me ajudar . Obrigado.

  4. parabénss muito showw..
    gostaria de saber se você tem algo desse tipo envolvendo o php. para o envio de fotos..
    obrigado aguardo resposta

  5. Esse efeito não funciona nas versões mais recenter do jQuery, tem como burlar este problema ou só na gambiarra msm? =p

  6. TEm como fazer isso e colocar dentro de uma pasta? Tipo varias pastas e quando abrirmos uma ficar essas fotos assim?

  7. Parabéns pelo excelente tutorial. Graças a ele consegui terminar meu trabalho. Precisava de uma galeria de fotos animada que pudesse ser vista em tablets, portanto não podia ser flash. Este foi o tutorial mais bem explicado que vi. Um grande abraço e sucesso. Príscila

  8. Muito foda, me deu ideia pra diagramar um layout que deveria ter 2 slides um na pg inicial e outro nas outras paginas. Com a variedade pude me decidir pelo mais adeguado a cada situação.

Leave a Reply

Your email address will not be published. Required fields are marked *


Como Criar Um Site, Blog - WebMaster.pt