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
<div id="wrap">
<div class="imagePlace">
<img src="images/1smallB.jpg" width="180" id="1" class="a" />
<img src="images/1small.jpg" width="180" class="b" />
</div>
<div class="imagePlace">
<img src="images/2smallB.jpg" width="180" id="2" class="a" />
<img src="images/2small.jpg" width="180" class="b" />
</div>
<div class="imagePlace">
<img src="images/3smallB.jpg" width="180" id="3" class="a" />
<img src="images/3small.jpg" width="180" class="b" />
</div>
<div class="imagePlace">
<img src="images/4smallB.jpg" width="180" id="4" class="a" />
<img src="images/4small.jpg" width="180" class="b" />
</div>
<div class="imagePlace">
<img src="images/5smallB.jpg" width="180" id="5" class="a" />
<img src="images/5small.jpg" width="180" class="b" />
</div>
<div class="imagePlace">
<img src="images/6smallB.jpg" width="180" id="6" class="a" />
<img src="images/6small.jpg" width="180" class="b" />
</div>
</div>
<div id="frame">
<img src="images/1big.jpg" width="500px" id="1image" />
<img src="images/2big.jpg" width="1" id="2image" style="display:none" />
<img src="images/3big.jpg" width="1" id="3image" style="display:none" />
<img src="images/4big.jpg" width="1" id="4image" style="display:none" />
<img src="images/5big.jpg" width="1" id="5image" style="display:none" />
<img src="images/6big.jpg" width="1" id="6image" style="display:none" />
<div class="caption" style="display:block" id="1_caption">1 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. </div>
<div class="caption" id="2_caption">2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. </div>
<div class="caption" id="3_caption">3 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. </div>
<div class="caption" id="4_caption">4 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Image one. </div>
<div class="caption" id="5_caption">5 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. </div>
<div class="caption" id="6_caption">6 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. </div>
</div>
Download do código usado neste tutorial: Galeria De Imagens Espectacular Com Super Efeitos jQuery
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.