En este caso os queremos mostrar como realizar una galería de imágenes sencillas con jQuery, esta galería constara de imagen “grande” y varias “pequeñas” y al situarnos sobre una pequeña se cambiara la grande por esta pequeña. Quedándonos algo parecido a lo siguiente:

Esta es una galería muy sencilla de implementar, lo primero que debemos hacer crearnos las imágenes grande y pequeñas de la siguiente forma:

<img src="coche1.jpg" alt="coche1" name="grande" width="338" height="253" id="grande" />
<div id="peques">
    <img src="coche1.jpg" width="100" height="77" /> 
    <img src="coche3.jpg" width="100" height="77" />
    <img src="coche2.jpg" width="100" height="77" />
</div>

A la imagen grande la hemos llamado “grande” y el resto de imágenes que saldrán debajo de esta imagen están metidas en un div que se llama peques.

Después lo único que tenemos que hacer es indicarle que cuando nos situamos sobre una imagen pequeña esta imagen se ponga en el lugar de la grande, esto lo realizamos dentro de jQuery usando la función hover, quedando algo similar:

<script type="text/javascript">
$(document).ready(function(){
    $("#peques img").hover(function(){
		var imagen=$(this).attr("src");
		$("#grande").attr("src",imagen);
	});
})
</script>

Con estas sencillas ordenes ya tendríamos nuestra galería funcionando.

Pin It on Pinterest