Integrar Fluidbox en tus galerías de WordPress

Artículo en vídeo:

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(){
jQuery(‘.gallery a’).each(function(){
jQuery(this).attr({‘data-fluidbox’ : ”});
});

if(jQuery(‘[data-fluidbox]’).length > 0){
jQuery(‘[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

function cargar_fluidbox(){
wp_register_style(‘fluidboxcss’, get_template_directory_uri() . “/css/fluidbox.min.css”, array(), ‘2.0.0’);
wp_register_script(‘fluidboxjs’, get_template_directory_uri() . “/js/jquery.fluidbox.min.js”, array(), ‘2.0.0’, true);
wp_register_script(‘iniciarfluidbox’, get_template_directory_uri() . “/js/iniciar-fluidbox.js”, array(‘fluidboxjs’), ‘1.0.0’, true);

wp_enqueue_style(‘fluidboxcss’);
wp_enqueue_script(‘fluidboxjs’);
wp_enqueue_script(‘iniciarfluidbox’);
}
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.

1 Comentarios

Responder

XHTML: Puedes usar esas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Contacta con Gestionatuweb
 
×

Utilizamos cookies para mejorar la experiencia de uso y obtener datos estadísticos de nuestras visitas. Si no aceptas las condiciones algunos apartados de la web podrían no funcionar correctamente. Más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar