Para crear una mini galería básica como la siguiente (den clic en las miniaturas):
Lo podemos hacer de la siguiente forma:
HTML
<div id="thumbs">
<img style="width: 50px;" alt="" src="../img/images/at.jpg" data-img="../img/images/a.jpg" />
<img style="width: 50px;" alt="" src="../img/images/bt.jpg" data-img="../img/images/b.jpg" />
</div>
<div>
<img id="imagenGrande" style="width: 500px;" alt="" src="../img/images/a.jpg" />
</div>
Jquery
$(document).ready(function(){
//selector de imagenes a aplicar la funcionalidad de click
$("#thumbs img").click(function(){
//obtenemos la imagen a mostrar
urlImagenGrande=$(this).data("img");
//asignamos la imagen por medio de prop
$("#imagenGrande").prop("src",urlImagenGrande);
})
});
Utilizando la propiedad prop procedemos a cambiar el atributo src de img al momento que se da clic en la miniatura. De esta manera queda la funcionalidad dinámica gracias al selector de jquery ($(“#thumbs img”)).
