Abrir una galería de imágenes con Fancybox 1.3.4

FancyBox es una herramienta para la visualización de imágenes, contenido HTML y multimedia al estilo “lightbox” flotante sobre la página web.

En este artículo vamos a ver como abrir una galería de imágenes en una ventana modal utilizando Fancybox.

Lo primero que tendremos que hacer es ir a la página oficial de Fancybox para descargar el script y ver más información.

Una vez tenemos los archivos necesarios en nuestro servidor podemos empezar a añadir a nuestra página HTML el efecto Fancybox.

En nuestra cabecera o <head> deberemos añadir los estilos y scripts necesarios:

<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("a[rel=example_group]").fancybox({
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',
        'titlePosition'     : 'over',
        'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
        }
    });
});
</script>

Hará falta la librería jQuery y los scripts y estilos de Fancybox, además de la llamada a la función fancybox() que tras pulsar en un elemento o imagen del grupo de imágenes se abrirá en una nueva ventana y se tendrá la opción de pasar a la siguiente imagen pulsando en la flecha de siguiente.

En nuestro <body> deberemos añadir el link con la imagen reducida que tras pulsarlo abrirá ampliada esta misma imagen.

<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
<a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
<a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
<a rel="example_group" href="./example/12_b.jpg" title=""><img alt="" src="./example/12_s.jpg" /></a>

Para que funcione correctamente es vital el uso del atributo «rel» del elemento «a» para unir estas 4 imágenes en un grupo o galería de imágenes.

Ver el ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 4 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

8 respuestas a “Abrir una galería de imágenes con Fancybox 1.3.4”

  1. Nora dice:

    Hola!
    He hecho la galería vinculada a la base de datos (php). Pero me gustaría que, aunque en la base de datos haya muchas fotos, la galería solo me mostrara 3.
    ¿Sabes cómo podría hacerlo?
    Gracias 😉

  2. Gabriel dice:

    Sabes como agregar también un video de youtube, y que este relacionado con más fotos como de galería.

  3. mariana dice:

    Hay manera de hacer el carrusel que tienes justo arriba sin tener que usar Fancybox, solamente html y css?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.