Skip navigation

jQuery.popeye es un plugin que facilita la presentación de una galería de imágenes en la web, siendo una alternativa mucho más integrada en el contenido que el famoso Lightbox.

popeye

Popeye muestra en un bloque alineado con el texto una previsualización de las imágenes. Al situar el cursor sobre la imagen previa, aparecerá el texto de la descripción de la imagen declarado en el atributo alt y los iconos para moverse por la galería y maximizar la foto.

El autor quería evitar así el uso de una capa superior que no permitiese seguir leyendo el contenido de la web a la vez que visualizar la galería completa.

Su uso es sencillo. Lo primero que tenemos que realizar es una lista con las imágenes que conformarán la galería:

<div id=”popeye1″ class=”ppy”>
<ul>
<li><a href=”01.jpg”><img src=”01.jpg” alt=”Lorem ipsum dolor sit amet.” /></a></li>
<li><a href=”02.jpg”><img src=”02.jpg” alt=”In tempus consequat purus.” /></a></li>
<li><a href=”03.jpg”><img src=”03.jpg” alt=”Sed consequat tincidunt sapien.” /></a></li>
</ul>
</div>

Posteriormente llamaremos a la función:

$(document).ready(function () {

$(‘#popeye1’).popeye();

});

La llamada es altamente parametrizable, pudiendo indicar la dirección hacia la que se abrirá la imagen, la animación, los textos, tamaños, clases, duración…

Visita el artículo original, la página de ejemplo y descarga el plugin desde el repositorio de jQuery.

Anuncios

One Trackback/Pingback

  1. By Bitacoras.com on 30 Mar 2009 at 10:36 am

    Información Bitacoras.com…

    Valora en Bitacoras.com: jQuery.popeye es un plugin que facilita la presentación de una galería de imágenes en la web, siendo una alternativa mucho más integrada en el contenido que el famoso Lightbox. Popeye muestra en un bloque alineado con el te…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: