Simple jQuery Gallery es un tutorial que publican en Paper Mashup y que nos muestra que con tan sólo unas pocas lÃneas de código, es posible montar un sencilla galerÃa de imágenes con jQuery.
Esta implementación de galerÃa simplemente se limita a mostrar las vistas en miniatura de las imágenes (thumbnail) y la primera de estas a tamaño completa, al hacer clic sobre una de las miniaturas, se mostrará la imagen en tamaño grande.
Implementación
Primero enlazamos el archivo de la bilbioteca jQuery desde la sección <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"> </script>
También enlazamos el archivo CSS:
<link href="../style.css" rel="stylesheet" type="text/css" />
El siguiente código Javascript que también colocamos en la sección <header>, define todo el comportamiento de la galerÃa:
<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>
Con el siguiente código CSS definimos los estilos para los tamaños de las imágenes de las vistas miniatura y a tamaño completo:
<style> #image{ border:4px #666 solid; height:480px; width:640px;} .thumb{ float:left; margin-right:10px; margin-top:10px;} </style>
Luego tenemos que escribir un código HTML similar a este:
<div id="image"><img src="images/1.png" border="0"/></div>
-Este div es el que muestra la imagen grande
<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>
-Estos enlaces son las imágenes miniaturas
Para esta implementación se deben crear previamente las imágenes a tamaño completo y las vistas en miniatura.
Simple jQuery Gallery:
Web: papermashup.com/simple-jquery-gallery
¿Cómo le agregarÃa unos botones de previous y next?
Miles de gracias pero para poner pie de foto como puedo hacerlo? gracias
Despues de buscar y buscar… este era el script que necesitaba. Muchas gracias!
Sorry Hernan, I made a mistake. I’ve already fix the link.
Best regards
Looks great but is that demo’s url right?.