¿Que ha pasado con el diseño?

Hoy el CSS Naked Day, un día (48 horas para abarcar todo el planeta) en el que las páginas web se desnudan para promover el uso de los estándares web. Si quieres saber más sobre el tema visita página del Annual CSS Naked Day.


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.