- Como Criar Um Site, Blog – WebMaster.pt - https://www.webmaster.pt -

Galeria De Imagens Espectacular Com Super Efeitos jQuery

Tweet [3]

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 [4]. 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 [5]

Tweet [3]
Be Sociable, Share!
  • [6]
  • [7]
  • [8]
  • [9]
  • [10]