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

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
}

Efecto lightbox de Divi en imágenes con un plugin

divi lightbox for images

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 4.2)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

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

  1. Miguel Romero

    buenas noches al agregar el codigo en function del childen de divi me sale el siguiente error: Cannot redeclare ayudawp_divi_lightbox_js_function() (previously declared in /home/vipsecuritygroup/public_html/wp-content/plugins/lightbox-images-for-divi/lightbox-images-for-divi.php:30) in /home/vipsecuritygroup/public_html/wp-content/themes/VIP-Segurity/functions.php on line 20

  2. Hola, cuando usas el maquetador de temas de Divi (Vs 4) la clase cambia, entonces debes cambiarla en la función:

    La función usa la clase: «entry-content», pero cuando haces un diseño para entradas cambia a : «et_pb_post_content»

    Se sustituye y funciona perfecto.

    Saludos

Deja un comentario

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

 

Ir arriba Ir al contenido