Contenido

jQuery.popeye un nuevo enfoque de lightbox

22 nov

+ 5

jQuery.popeye es una vuelta de tuerca más a la idea de lightbox como sistema para mostrar imagenes en nuestras páginas web. Usando un sistema basado en listados remaquetados con CSS podemos mostrar galerías de imagenes fácilmente en nuestras aplicaciones.

    <div style="clear:both;">
        <div id="popeye1" class="popeye">
            <ul>
              <li><a href="....."><img src="....." alt="´...." /></a></li>
              <li><a href="....."><img src="....." alt="´...." /></a></li>
              .....
              </ul>
        </div>
// jQuery
$(document).ready(function() {
   $('.popeye').popeye();
});

Usando la class “popeye” hacemos que el listado de imagenes que se encuentre en su interior pasará a ser una galería que veremos ocupando un pequeño espacio de nuestra web.

jquerypopeye-inline

Haciendo click sobre la imagen, podemos visualizar la imagen a un tamaño mayor.

jquerypopeye-desplegado

Descargar / Demo

  • Podías extenderte un poco más en cómo montar este plugin porque estoy peleando con él y no consigo hacerlo funcionar en local.

    Me pierdo en el paso de iniciar el jQuery, no se donde poner la función que comentas:

    // jQuery
    $(document).ready(function() {
       $('.popeye').popeye();
    });

    Y aún así no me sale…

  • Me gusto, sería ideal de poder adaptar algo asi a WordPress. Hace tiempo estoy buscando una galeria para wordpress que sea similar a esto.

  • Tío, eres un hacha. Justamente estaba pensando en añadir Lightbox a mi PFC y me sales con esto ;-)

    Gracias neng!!

  • Esta variación de lightbox es especialmente interesante para todos aquellos blogs que incluyen imágenes explicativas o ilustrativas en sus artículos, de forma que no molesten y se puedan ampliar sin salir de la página.

    ¿Sabéis si hay algún plugin para WordPress basado en esto?

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.