Trocando fotos sem refresh

Nessa vídeo-aula trabalharemos com o tema troca de fotos sem refresh, utilizando HTML5, CSS e JQuery. Esse tipo de sistema é bem utilizado em e-commerces. Um exemplo é o mercado livre, conforme imagem abaixo.

HTML5

Primeiramente vamos linkar nossos arquivos externos, conforme código abaixo:

<link rel="stylesheet" href="stylesheet.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="javascript.js"></script>

Posteriormente criaremos as divs e vamos inserir os códigos das imagens.

<div class="content">

    <div class="fotogrande">
        <img src="images/a.jpg" alt="foto grande">
    </div>
    
    <div class="fotopequena">
        <img src="images/thumb/a.jpg" alt="foto pequena 1">
    </div>
    
    <div class="fotopequena">
        <img src="images/thumb/b.jpg" alt="foto pequena 2">
    </div>
    
    <div class="fotopequena">
        <img src="images/thumb/c.jpg" alt="foto pequena 3">
    </div>

</div>

*Escolha três fotos quaisquer para ser a foto a,b e c.jpg.

CSS

Nosso arquivo CSS estilizará as imagens e seu posicionamento na tela, sendo uma imagem maior e outras thumbnails que ao serem clicadas mudarão a foto grande.

body{margin: 0; padding: 0;}

.content{width: 100%;}

.fotogrande{width: 100%; float:left;}
    .fotogrande img{width: 100%; height: 400px;}

.fotopequena{float:left; cursor:pointer; width: 30%; margin-right: 3%;}
    .fotopequena img{width: 100%; height: 150px;}

JQuery

A função do JQuery nesse sistema é fazer com que ao clicar na foto pequena, a foto grande seja alterada sem refresh de página. Para tanto, vamos inserir no código javascript.js o seguinte código:

$(document).ready(function(){
    $('.fotopequena img').click(function(){
        var urlcompleta=$(this).attr('src');
        var urlaposbarra=urlcompleta.lastIndexOf('/') + 1;
        var urlarquivo=urlcompleta.substr(urlaposbarra);

        $('.fotogrande img').attr({src: 'images/'+urlarquivo});
    }
}