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

Be Sociable, Share!

8 Comentários

  1. Olá
    Parabens pelo tutorial

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

  2. Carlos Andrei

    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. Marcelo

    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. farley

    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. Pedro

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

  6. Emanuel

    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. Kennedy

    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.

Participa! Comenta...