Tutorial Divi: Lightbox también en las imágenes, no solo en las galerías

Publicado por Fernando Tellado el 13 Dic, 2017

Índice de contenidos

1 Efecto lightbox de Divi en imágenes con un poco de código
2 Efecto lightbox de Divi en imágenes con un plugin

Como ya sabrás si usas Divi, entre sus posibilidades incorpora de manera nativa el efecto lightbox, o mesa de luz, en las galerías, para abrir las imágenes en una ventana emergente. La única pega es que esto no funciona en imágenes sueltas.

Si activas la opción de galería Divi en los ajustes del tema o el plugin cuando insertes una galería en una entrada o página, al hacer clic en cualquier imagen esta se abrirá en una ventana emergente (modal) desde la que navegar fácilmente entre el resto de imágenes de la galería y, lo más importante, sin salir de la publicación en la que estén.

lightbox divi en imágenes

Pero hay muchos usuarios que también necesitan o quieren esa funcionalidad cuando enlazan una imagen al archivo multimedia, y ahí no funciona por defecto el lightbox de Divi, con lo que habría que instalar un nuevo plugin, con su propio script que cree la ventana emergente.

Y el problema principal es la sobrecarga, tener que usar dos scripts para conseguir un mismo efecto. Unos scripts que se cargarán en cada URL de tu sitio.

Otro problema de tener dos scripts para lo mismo es que la experiencia de usuario no será consistente, pues será difícil encontrar otro plugin/script que tenga el mismo diseño de ventana emergente que el que usa Divi.

Afortunadamente hay un modo de re-utilizar el mismo script de Divi también para las imágenes sueltas enlazadas al archivo multimedia.

Efecto lightbox de Divi en imágenes con un poco de código

Para utilizar el script lightbox de Divi, también en imágenes sueltas, simplemente añade este código al archivo functions.php del tema hijo de Divi:

add_action( 'wp_footer', 'ayudawp_divi_lightbox_js_function' );
function ayudawp_divi_lightbox_js_function() {
	?><script type="text/javascript">(function($){$(document).ready(function(){$('.entry-content a').children('img').parent('a').addClass(function(){return(($(this).attr("href").split("?",1)[0].match(/\.(jpeg|jpg|gif|png)$/) != null) ? "et_pb_lightbox_image" : "");});});})(jQuery)</script><?php
}

add_action( 'wp_footer', 'ayudawp_divi_lightbox_js_function' );

function ayudawp_divi_lightbox_js_function() {

?><script type="text/javascript">(function($){$(document).ready(function(){$('.entry-content a').children('img').parent('a').addClass(function(){return(($(this).attr("href").split("?",1)[0].match(/\.(jpeg|jpg|gif|png)$/) != null) ? "et_pb_lightbox_image" : "");});});})(jQuery)</script><?php

}

Efecto lightbox de Divi en imágenes con un plugin

Si prefieres usar un plugin que haga lo mismo, que aproveche el script ya existente de Divi, puedes instalar Divi Lightbox for Images.

No tienes que configurar nada, solo instalarlo y activarlo. A partir de ese momento al enlazar una imagen a su archivo multimedia también se utilizará el script de Divi para ello, no solo para las galerías.

De paso, el plugin carga el script en el pié de página, mejor de cara a la optimización (WPO) de tu sitio.