27 de agosto de 2013

Galeria com Miniatura jQuery

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: 5.031



jQuery

06 de maio de 2014

Accordion com jQuery

Neste tutorial vamos aprender a fazer o efeito Accordion (também conhecido como Sanfona) com jQuery.

21 de agosto de 2013

Plugin jQuery

Neste tutorial vamos aprender como usar um Plugin jQuery. A maioria dos Plugins jQuery seguem a mesma linha de configuração usando requisitos similares, depois que se aprende a configurar um, fica mais fácil entender todos os outros...

Sérgio Toledo | Full-Stack Web Developer | LinkedIn | GitHub | YouTube

Todos os direitos reservados ©