Existem várias formas diferentes para trabalhar com o 'SRC' das imagens. Caso esteja chamando as imagens através de um banco de dados, onde existe a imagem original e a miniatura, podemos colocar o caminho da imagem original em um input hidden para que esse input seja enviado para o 'SRC', além de colocar ou no atributo 'title' ou no 'alt' o id da imagem. Caso seja apenas um imagem (sem miniatura) fica ainda mais fácil, pois pegamos o 'SRC' da imagem clicada e enviamos para ser mostrada maior e alimentamos o 'alt' ou 'title' com os valores manuais.
Obs: as linha em laranja serão usadas apenas em caso de miniatura/amplianda, no caso uma imagem maior e outra menor, caso usem a mesma imagem tanto em miniatura quanto a ampliada, desconsiderem essas linhas.
Vamos para o HTML:
<img src='primeira-a-ser-exibida.jpg' id='foto_ampliada' >
<img src='caminho' class='mini' alt='1' title='1' >
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini1" />
<img src='caminho' class='mini' alt='2' title='2' >
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini2" />
<img src='caminho' class='mini' alt='3' title='3' >
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini3" />
<img src='caminho' class='mini' alt='4' title='4' >
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini4" />
Vamos para o Jquery
$(document).ready(function(){
$(".mini").click(function(){
var cam = $(this).attr('src');
var id = $(this).attr('alt');
var cam = $("#mini"+id).val();
$("#foto_ampliada").attr('src',cam);
})
}) // x ready
Após chamar a função ready (padrão), vamos as funções:
A as miniaturas vão conter a classe 'mini' que ao serem clicadas, caso seja através do banco de dados será pego o valor do atributo 'alt' e através dele vamos pegar o valor do input hidden.
Simples não?
Através desse princípio podemos ir mais fundo nessa função.
Podemos colocar um preload em jquery para que enquanto o 'SRC' é alterado informar algo para o usuário.
Grande Abraço!
