Etiqueta: click

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”)).