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
Download do código usado neste tutorial: Galeria De Imagens Espectacular Com Super Efeitos jQuery
(2 votes, average: 4.50 out of 5)
8 Responses
Olá
Parabens pelo tutorial
Você poderia explicar como faço pra usar esse código no wordpress?
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.
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.
parabénss muito showw..
gostaria de saber se você tem algo desse tipo envolvendo o php. para o envio de fotos..
obrigado aguardo resposta
Esse efeito não funciona nas versões mais recenter do jQuery, tem como burlar este problema ou só na gambiarra msm? =p
TEm como fazer isso e colocar dentro de uma pasta? Tipo varias pastas e quando abrirmos uma ficar essas fotos assim?
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
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.