Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Galería FancyBox3

Escrito por Eugenia Molinero

¿Qué son los lightbox?

Lightbox es un recurso basado en JQuery que se usa mayormente para armar galerías de imágenes. 

Consiste en imágenes miniaturas que al ser clickeadas muestran su versión ampliada sin necesidad de ir a otra página. Esta nueva imagen se posiciona centrada sobre el contenido del sitio y toda la pantalla se cubre con un fondo de color semitransparente. Como funciones adicionales puede tener flechas para correr entre las imágenes y epígrafes (caption).

Si bien su uso más característico es en galerías, puede aplicarse también a ventanas de alertas, videos, y otros contenidos.

FancyBox 3

En este caso vamos a usar fancyBox 3, un plugin de jQuery libre de uso para proyectos sin fines de lucro y con licencia paga para sitios comerciales: http://fancyapps.com/fancybox/3/

Paso por paso:

1. Instalamos la librería de JQuery
Puede ser de modo local descargándola del sitio jquery.com e incluyéndola en nuestro proyecto, o vinculándola a través de Google. Recordemos que aunque usemos más de un plugin jquery, sólo se vincula una vez la librería general.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2. Incluimos los archivos propios del plugin
Este plugin incluye una hoja de estilos css y un archivo js. Los buscamos en la carpeta DIST dentro del conjunto de archivos que descargamos. El archivo css lo podemos incluir en el <head> y el js antes del cierre de la etiqueta <body>.

<!-- fancyBox  archivo CSS -->
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<!-- fancyBox archivo JS -->
<script src="js/jquery.fancybox.min.js"></script>

3. Preparamos el HTML
La mayoría de los lightbox usa la misma estructura HTML para armar la galería. Consiste en una etiqueta <img> (la imagen chica), encerrada en una etiqueta <a> que enlaza a la imagen ampliada.

<a href="imagenes/img-ampliada.jpg">
       <img src="imagenes/img-miniatura.jpg" alt="">
</a>

Esto sería la estructura básica para que cada imagen abra su ampliación. En los pasos siguientes vamos a ver cómo activarlo para que funcione la galería. Este plugin tiene dos formas de inicializar el funcionamiento de la galería: a través de atributos data, o a través de javascript. Tenemos que elegir una u otra opción.


4. Inicializar fancyBox
4.1 A través de atributos data

Los data son atributos personalizados que nos permiten sumar más información en el HTML sin afectar a su visualización y sin salirnos del propio lenguaje HTML. Generalmente es información que no podríamos agregar por medio de ningún otro atributo, por eso decimos "personalizados". Una gran cantidad de librerías y/o plugins de javascript, hacen uso de los “data attributes” guardando en ellos información relativa al comportamiento que puede tener un elemento específico.

En este caso fancyBox utiliza el atributo data-fancybox para poner en funcionamiento la galería llamándolo desde el archivo js.

<a href="imagenes/img-ampliada.jpg" data-fancybox>
       <img src="imagenes/img-miniatura.jpg" alt="">
</a>

Si queremos agregar una descripción de la imagen debemos agregar el atributo data-caption

<a href="imagenes/img-ampliada.jpg" data-fancybox  data-caption="Texto">
       <img src="imagenes/img-miniatura.jpg" alt="">
</a>

Hasta acá las imágenes abren por separado sin relacionarse como galería, es decir sin que se pueda correr de una foto a otra. Para que funcionen como galería bastará con relacionar el atributo data-fancybox con un mismo valor.

<a href="imagenes/img-ampliada.jpg" data-fancybox="galeria1"  data-caption="Texto">
       <img src="imagenes/img-miniatura.jpg" alt="">
</a>

Si tuviéramos muchas galerías independientes, cada galería tendrá un valor diferente de la anterior.

4.2. Inicializar fancyBox a través de javascript
Para hacer funcionar la galería a través de javascript vamos a necesitar un elemento que abra la ampliación, en nuestro caso es la etiqueta <a> a la que le vamos a poner un class="fancybox".

<a href="imagenes/img-ampliada.jpg" class="fancybox">
       <img src="imagenes/img-miniatura.jpg" alt="">
</a>

Y un script que será el encargado de poner en funcionamiento la galería. Este script lo pegamos debajo del vínculo al archivo jquery.fancybox.min.js.

 <script type="text/javascript">   
            $(".fancybox").fancybox({   
                 // Options will go here 
             });
</script>

Crear una ventana modal con fancyBox

Para crear una ventana modal (o emergente) primero debemos crear una <div> que será la que tendrá el contenido a mostrar y le ponemos un id. Esta ventana tiene que estar oculta por css con display:none.

<div id="ventanaModal" class="oculta">
         <h2>Título de la ventana</h2>
         <p> Lorem ipsum </p>
</div>
.oculta { display: none }

Luego creamos un enlace o botón con la etiqueta <a> que será el encargado de abrir la ventana modal. Para eso le agregamos el atributo data-src y en el valor ponemos el ID de la ventana oculta.

<a data-fancybox  data-src="#ventanaModal"  href="javascript:;">
       Abrir ventana
</a>

Más opciones

En la página de documentación de fancyBox se pueden encontrar otras posibles aplicaciones: http://fancyapps.com/fancybox/3/docs/

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.