WP Manifestindependent plugin directory
manifest / media / gutenberg-modal-lightbox

DGE Modal Lightbox

Convierte imágenes y galerías de Gutenberg en modal lightbox con navegación táctil

by DGE Portal Educativo Gob. de Mendoza. · github.com/jos3l0/gutenberg-modal-lightbox · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/jos3l0/gutenberg-modal-lightbox/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/jos3l0/gutenberg-modal-lightbox ↗

Contributors: joliva Tags: gutenberg, blocks, lightbox, modal, gallery, images, swipe, mobile, touch Requires at least: 5.0 Tested up to: 6.9 Stable tag: 2.0.2 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html

Convierte automáticamente las imágenes y galerías de Gutenberg en un modal lightbox con navegación táctil. Compatible con escritorio y móviles.

Description

Gutenberg Modal Lightbox es un plugin de WordPress que transforma la experiencia de visualización de imágenes en tu sitio. Detecta automáticamente los bloques nativos de Gutenberg (core/image y core/gallery) y los convierte en un elegante lightbox modal con navegación entre imágenes, soporte táctil para dispositivos móviles y total compatibilidad con el editor de bloques.

Características principales

  • Detección automática: Funciona con bloques de imagen individual y galerías nativas de Gutenberg.
  • Navegación intuitiva:
    • Flechas de navegación (anterior/siguiente) en escritorio.
    • Swipe táctil para cambiar de imagen en móviles y tablets.
  • Interfaz limpia:
    • Modal centrado con overlay oscuro.
    • Contador de imágenes (ej. "3/5").
    • Título o caption de la imagen (si está disponible).
    • Botón de cierre (X), click en overlay o tecla ESC.
  • Seguro y optimizado:
    • Nonces para peticiones AJAX.
    • Sanitización y escape de datos siguiendo los estándares de WordPress.
    • Carga condicional de assets (solo en páginas con bloques de imagen).
  • Compatible:
    • Funciona con cualquier tema que respete los bloques nativos de Gutenberg.
    • Probado con temas como Divi (modo block editor) y WordPress por defecto.
    • Soporte para WordPress 5.0+ y PHP 7.4+.

Installation

Instalación automática (desde el administrador de WordPress)

  1. Ve a Plugins > Añadir nuevo.
  2. Busca "Gutenberg Modal Lightbox".
  3. Haz clic en Instalar ahora y luego en Activar.

Instalación manual (vía FTP o SSH)

  1. Sube la carpeta gutenberg-modal-lightbox a /wp-content/plugins/.
  2. Activa el plugin desde el menú Plugins en el escritorio de WordPress.

Instalación vía WP-CLI

Usage

Una vez activado, el plugin funciona automáticamente. No requiere configuración.

  1. Para imágenes individuales: Haz clic en cualquier imagen insertada con el bloque Imagen. Se abrirá el modal mostrando esa imagen.
  2. Para galerías: Haz clic en cualquier imagen dentro de un bloque Galería. Se abrirá el modal mostrando esa imagen, con flechas de navegación (o swipe táctil) para recorrer todas las imágenes de la galería.

Ejemplo de uso

Bloque de galería en el editor:



<figure class="wp-block-gallery">...</figure>

Comportamiento en el frontend: Al hacer click en una imagen, se abrirá el modal con navegación entre las 5 imágenes de la galería.

Frequently Asked Questions

¿Funciona con temas como Divi o Avada?
Sí. El plugin está diseñado para funcionar con cualquier tema que utilice los bloques nativos de Gutenberg para insertar imágenes y galerías. En el caso de temas con constructores propietarios (como el Divi Builder), el plugin funcionará en las partes de la página construidas con bloques de Gutenberg.

¿Puedo personalizar los estilos del modal?
Sí. Puedes sobrescribir los estilos CSS agregando tus propias reglas en el archivo style.css de tu tema hijo. Los estilos del modal usan la clase base .gml-modal.

¿Afecta la velocidad de mi sitio?
No. Los archivos CSS y JavaScript solo se cargan en las páginas que contienen al menos un bloque de imagen o galería de Gutenberg. Además, el código está minimizado y optimizado.

¿El plugin soporta títulos y pies de foto?
Sí. Si la imagen tiene un caption o alt definido, se mostrará en la parte inferior del modal.

Screenshots

Galería en el frontend: Vista de una galería de imágenes en una entrada.

Modal abierto: El lightbox mostrando una imagen con navegación y contador.

Vista móvil: Navegación táctil mediante swipe.

Changelog

2.0.2
Corrección: Solucionado problema de codificación de caracteres que impedía la ejecución del script en algunos servidores.

Mejora: El script ahora construye las galerías directamente desde el DOM, haciéndolo más robusto ante temas que modifican la estructura HTML de los bloques.

Seguridad: Reforzada la sanitización de URLs y textos.

2.0.1
Corrección: Las flechas de navegación ahora se muestran correctamente en las galerías.

Mejora: Selectores de eventos mejorados para mayor compatibilidad.

2.0.0
Lanzamiento inicial con funcionalidad base, seguridad (nonces, escapes) y soporte táctil.

Upgrade Notice

2.0.2
Actualización recomendada para mejorar la compatibilidad con temas que modifican el marcado HTML de las galerías.

Additional Information

Idiomas: Español (es_ES) incluido. Listo para traducciones.

Soporte: Para reportar errores o solicitar características, por favor abre un issue en el repositorio de GitHub.

Contribuciones: Las contribuciones son bienvenidas a través de Pull Requests en GitHub.

License

GPLv2 or later. Este plugin es software libre.