Integrar Fluidbox en tus galerías de WordPress

Las galerías por defecto en WordPress son bastante sencillas y poco funcionales. Además pueden despistar a nuestros usuarios sacándoles de la página o artículo en el que se encuentran para ampliar una imagen.

Existen multitud de plugin que dan dinamismo y funcionalidad a las galerías, como Jquery Lightbox o la propia que se integra en JetPack.

Pero en este artículo vamos a ver cómo integrar Fuidbox de forma manual, un módulo para galerías WordPress que destaca por su sencillez y elegancia.

En la página principal de Fuidbox podéis ver el efecto aplicado a varias imágenes, las cuales se amplían con un suave zoom al hacer clic y vuelven a su estado inicial haciendo otro clic.

Para integrarlo en nuestra plantilla de WordPress debemos descargar los archivos desde el enlace a GitHub o cdnjs. En el artículo lo haremos desde GitHub.

Una vez dentro de GitHub localizamos el botón Clone or Download y descargamos el módulo Fluidbox en ZIP.

Una vez extraídos los archivos, los que nos interesan se encuentran en la carpeta Dist, donde hay otras dos carpetas: css y js.

Y copiamos los archivos:

• fluidbox.min.css
• jquery.fluidbox.min.js

Tanto el archivo css como el JavaScript debemos copiarlos en la plantilla de nuestro proyecto web, cada uno dentro de su sub-carpeta corresponiente (/css para el archivo de estilos y /js para el JavaScript). Muy importante que estén en las rutas indicadas ya que vamos a hacer referencia a ellas más adelante y no funcionarán si los archivos se encuentran en otro sitio. Ahora creamos un nuevo archivo al que llamaremos por ejemplo: iniciar-fluidbox.js. Copiamos dentro el siguiente código y lo guardamos también dentro de la carpeta /js en nuestra plantilla principal, junto al jquery.fluidbox.min.js.

2. Código javascript para iniciar Fluidbox.

$ = jQuery.noConflict();

$(document).ready(function(){
    $('.gallery a').each(function(){
        $(this).attr({'data-fluidbox' : ''});
    });
 
    if($('[data-fluidbox]').length > 0){
        $('[data-fluidbox]').fluidbox();
    }
});

Esto hará que el efecto Fluidbox se aplique a todos los elementos <a href> dentro de la clase .gallery que es la usada por las galerías WordPress, con lo cual se aplicará a cada una de las imágenes.

Seguidamente accedemos al archivo functions.php de nuestra plantilla y más o menos al final del código añadimos la siguiente función para llamar tanto al css de fluidbox, como a los JavaScript creados.

Código PHP para el archivo functions.php

<?php
    function cargar_fluidbox(){
        wp_enqueue_style("fluidboxcss", get_template_directory_uri()."/css/fluidbox.min.css", array(), "2.0.0");
        wp_enqueue_script("fluidboxjs", get_template_directory_uri()."/js/jquery.fluidbox.min.js", array(), "2.0.0", true);
        wp_enqueue_script("iniciarfluidbox", get_template_directory_uri()."/js/iniciar-fluidbox.js", array(), "1.0.0", true);
    }
    add_action("wp_enqueue_scripts", "cargar_fluidbox");
?>

Y eso es todo. Ahora tus galerías deberían disfrutar del efecto Fluidbox.

Si no te funciona, revisa que todos los nombres de archivos estén correctos y en las rutas especificadas anteriormente. Además comprueba que las imágenes de la galería apunten a Archivo multimedia, de lo contrario es posible que no funcionen.