Crear una galería de imágenes simple con jQuery

Ya hemos visto en el blog grandes efectos que le podemos aplicar a nuestras imágenes para hacerlas más llamativas al momento de verlas, usando frameworks como jQuery podemos lograr casi cualquier cosa que queramos, claro, mientras sepamos como hacerlas. Pero a veces es desgastante tener que instalar un súper código cuando sólo queremos una simple galería de imágenes, por eso les traigo este tutorial, donde vamos a aprender a crear una sencillas galería de imágenes con jQuery donde podremos tener miniaturas y al momento de seleccionarlas la imagen completa aparecerá en la parte de arriba, así que no hay que perder más tiempo, el resultado está aquí y el tutorial después del salto.

Scripts

Primero vamos a enlazar los archivos de código como el de jQuery y el de nuestra hoja de estilos, este último es opcional ya que puedes escribir los estilos directamente en la página web pero es recomendable que lo hagas en un documento css. El código va antes de la etiqueta </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"> </script>

link href="../style.css" rel="stylesheet" type="text/css" />

Ahora vamos a crear una función para la galería de imágenes

<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
</script>

Ya que tenemos nuestra función hecha definimos los estilos para ordenar las imágenes.

<style>
#image{
border:4px #666 solid; height:480px; width:640px;
}
.thumb{ float:left; margin-right:10px; margin-top:10px;
}
</style>

HTML

Ahora vamos a crear la interfaz para nuestra galería de imágenes, primero tenemos que insertar una capa donde se cargue la imagen completa, y abajo ponemos las miniaturas para que cuando se de clic la imagen aparezca en la capa.

<div id="image"><img src="images/1.png" border="0"/></div>

<a href="#" rel="images/1.png"><img src="images/t1.png" border="0"/></a>
<a href="#" rel="images/2.png"><img src="images/t2.png" border="0"/></a>
<a href="#" rel="images/3.png"><img src="images/t3.png" border="0"/></a>

Hay que fijarse que las miniaturas y la imagen completa deben crearse antes

Web: papermashup.com/simple-jquery-gallery


Demo: papermashup.com/demos/jquery-gallery


Descargar: papermashup.com/demos/jquery-gallery/gallery.zip


Vía pixelcoblog