Magazine

Photobox Plugin jQuery para galerías de fotos con CSS3

Publicado el 26 diciembre 2012 por Biriicom @biriiCom

Photobox es un plugin jQuery para crear galerías de fotos utilizando transiciones y animaciones hechas con CSS3.

Photobox - Plugin jQuery para galerías de imágenes

Los puntos fuertes de este plugin son los siguientes:

* El script y el CSS ocupan 7Kbytes cada uno (el script minimizado, sin comprimir con gzip)

* Para obtener las mejores prestaciones posibles, aprovecha la aceleración hardware para que las transiciones y animaciones CSS3 sean lo más suave posibles.

* Bonito interfaz de usuario y fácil de utilizar.

* Precarga CSS3 hecha a medida. La única imagen que necesitas es el archivo “arrow.png” (y pronto ni siquiera eso).

* Funciona también en IE9 (Internet Explorer 9) y posteriores, aunque obviamente, no tan bien como con otros navegadores “normales”.

*En todos los eventos de miniaturas (thumbnails) se aplica la técnica de event-delegation (esto es significativo para desarrolladores expertos). Esto significa que la gestión de eventos se aplica automáticamente incluso a nuevos elementos que sean añadidos de forma dinámica a la galería de imágenes.

Con Photobox el autor del plugin buscaba tres cosas: que fuera bonito y atractivo, que no “pesara” mucho y funcionar sin necesidad de otros componentes y, por último, que tuviera un buen rendimiento a la hora de mover los gráficos. Parece que lo ha conseguido, pero también es cierto que es necesario contar con un procesador (o tarjeta gráfica) medianamente potentes para que los movimientos se vean con soltura.

Lo que permite hacer el plugin de Photobox es, básicamente, lo siguiente:

* Hacer zoom (acercarse y alejarse) sobre las imágenes con la rueda del ratón y navegar utilizando el movimiento del ratón para moverse por las fotos.

* Las miniaturas que aparecen en la parte inferior de la pantalla pueden seleccionarse con el movimiento del ratón.

* Se muestra el texto de los atributos “alt” o “title” en la parte inferior.

* Se muestra el índice de la foto en que nos encontramos, lo que nos permite saber cuántas nos quedan por ver (Ejemplo: 25/80)

* Permite hacer un bucle entre la última y la primera imagen de manera que no haya que retroceder o avanzar toda la secuencia para alcanzar uno de los extremos.

* Dispone de atajos de teclado para navegar y para cerrar la vista de imágenes de la galería de fotos.

Requerimientos: jQuery
Compatibilidad: Navegadores modernos (es decir, nada de IE6)
Sitio web: http://dropthebit.com/500/photobox-css3-image-gallery-jquery-plugin/
Demo: http://dropthebit.com/demos/photobox/
Descarga: https://github.com/yairEO/photobox

Artículos relacionados:

  • Shapeshift Plugin jQuery organiza elementos en cuadrícula…
  • SpectragramJS – Plugin jQuery para el API de Instagram
  • Adipoli – plugin jQuery para efectos sobre fotos
  • Motio – Plugin jQuery para animaciones y panorámicas…
  • gmaps.js Plugin jQuery para añadir Google maps de forma…

Volver a la Portada de Logo Paperblog

Dossier Paperblog