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.
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
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Gracias Fernando excelente aporte.
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
¿Has probado a meterlo en un mu-plugin? ¿o usar el plugin?
es posible abrir el light box pero desde un texto es decir un hipervinculo (link)
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
Hola Fernando, lo primero gracias por toda la información que ofreces.
Llevo tiempo utilizando el script y funcionaba de maravilla. Pero en la última versión de Divi ha dejado de funcionar. Ni el sript ni el plugin.
Solo me funciona si vinculo css a cada imagen por separado y de manera individual en la galera de medios con «et_pb_lightbox_image».
Un saludo
Lo expliqué en el 2020:
PIERRE
20-11-2020 A LAS 17:00
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
Muchas gracias por la aclaración 😉
Fernando acabo de ver que volvió a cambiar ahora la clase debe ser: wp-caption
Del código solo he cambiado «entry-content» por «wp-caption». Es así verdad?
Probé primero con «et_pb_post_content» y ahora con «wp caption,» pero me sigue sin funcionar.
Algo estaré haciendo mal …