SummArg | Cursos y recursos para webmasters

01/08/2011

Miniaturas de imágenes con diferentes efectos al agrandar

jQuery Image Gallery es un plugin simple y vistoso que despliega nuestras miniaturas una al lado de la otra. Se pueden elegir diferentes efectos para visualizar una imagen en tamaño natural y distintos skins para los marcos y botones.

Para implementarlo debemos vincular entre etiquetas <head> los siguientes archivos.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/south-street/jquery-ui.css" id="theme">
<link rel="stylesheet" href="jquery.image-gallery.css">

Antes de la etiqueta de cierre </body> colocamos:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="jquery.image-gallery.js"></script>
<script src="application.js"></script>

En donde application.js contiene la configuración de nuestra galería de imágenes. Cada imagen de la galería deberá contener [rel=gallery]. En el archivo de configuración del ejemplo tenemos una muestra de cómo importar la galería desde una cuenta Flickr.

 

Descarga | Demo

Dejar un comentario