27 de August de 2013
Neste tutorial vamos aprender a fazer uma Galeria de Imagens com Miniatura jQuery.
Ao abrir a página a primeira miniatura é exibida ampliada e a cada clique a miniatura correspondente é exibida.
Primeiro vamos criar nosso HTML com duas Divs, uma para a as miniaturas e outra para as imagens maiores:
<!doctype html>
<html lang="pt-br">
<head>
<title>Galeria com Miniatura jQuery</title>
<meta charset="utf-8">
<!-- Scripts -->
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="miniaturas">
<a href="#" id="1"><img src="images/miniatura1.jpg" alt="" /></a>
<a href="#" id="2"><img src="images/miniatura2.jpg" alt="" /></a>
<a href="#" id="3"><img src="images/miniatura3.jpg" alt="" /></a>
</div>
<div class="galeria">
<img src="images/imagem1.jpg" alt="" id="imagem-1" />
<img src="images/imagem2.jpg" alt="" id="imagem-2" />
<img src="images/imagem3.jpg" alt="" id="imagem-3" />
</div>
</body>
</html>
Lembrando que precisamos da biblioteca jQuery que neste exemplo foi a versão 1.10.2 conforme indicado na linha 8.
Também vamos precisar das imagens e das miniaturas copiadas dentro da pasta "images".
Agora vamos inserir o código jQuery para darmos interatividade:
$(document).ready(function(){
// Ocultamos todas as imagens da galeria
$('.galeria img').hide();
// Exibimos a primeira imagem
$('#imagem-1').show();
// Eventos para o clique nas miniaturas
$('.miniaturas a').click(function(){
// Ocultamos todas as imagens da galeria
$('.galeria img').hide();
//Pegamos o id da miniatura clicada var
$id = $(this).attr('id');
// Exibimos a imagem referente à miniatura
$('#imagem-'+$id).show();
});
});
O código completo ficou assim:
<!doctype html>
<html lang="pt-br">
<head>
<title>Galeria com Miniatura jQuery</title>
<meta charset="utf-8">
<!-- Scripts -->
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
// Ocultamos todas as imagens da galeria
$('.galeria img').hide();
// Exibimos a primeira imagem
$('#imagem-1').show();
// Eventos para o clique nas miniaturas
$('.miniaturas a').click(function(){
// Ocultamos todas as imagens da galeria
$('.galeria img').hide();
//Pegamos o id da miniatura clicada var
$id = $(this).attr('id');
// Exibimos a imagem referente à miniatura
$('#imagem-'+$id).show();
});
});
</script>
</head>
<body>
<div class="miniaturas">
<a href="#" id="1"><img src="images/miniatura1.jpg" alt="" /></a>
<a href="#" id="2"><img src="images/miniatura2.jpg" alt="" /></a>
<a href="#" id="3"><img src="images/miniatura3.jpg" alt="" /></a>
</div>
<div class="galeria">
<img src="images/imagem1.jpg" alt="" id="imagem-1" />
<img src="images/imagem2.jpg" alt="" id="imagem-2" />
<img src="images/imagem3.jpg" alt="" id="imagem-3" />
</div>
</body>
</html>
Para dar um efeito mais suave de transição, faça o teste alterando a função show() pela função fadeIn() na linha 26. Esta função ainda aceita parâmetros como fadeIn('slow') ou o tempo em milisegundos fadeIn(500).
Espero que tenham gostado.
Visualizações: 8.455