Lightbox personalizable - moderno, gestos de deslizamiento, modo pantalla completa y más

[Don]

|||
|-|-|-|
| | Vista previa| Theme Creator |
| |Repositorio| GitHub - VaperinaDEV/discourse-custom-lightbox |
| |Guía de instalación|Cómo instalar un tema o componente de tema|
| |¿Nuevo en Temas de Discourse?| Guía para principiantes sobre el uso de Temas de Discourse

Hola

Este componente de tema modifica el magnific popup (lightbox/galería) para hacerlo más fácil de usar, especialmente en dispositivos móviles.

---

Este componente realizará muchos cambios en el magnific popup predeterminado.

• Diseño más moderno
• Botón de pantalla completa (tecla de acceso rápido F)
• Botón para mostrar/ocultar título
• Gestos táctiles deslizantes
• deslizar a la derecha - imagen anterior
• deslizar a la izquierda - siguiente imagen
• deslizar hacia abajo - cerrar lightbox

---

Traducciones del tema para cambiar el título de los botones.

zoom_in_button_title: "Acercar"
zoom_out_button_title: "Alejar"
close_button_title: "Cerrar (Esc)"
fullscreen_button_title: "Modo pantalla completa (F)"
toggle_title_button_title: "Mostrar/Ocultar Información"

---

Este nuevo lightbox personalizado está inspirado en New Discourse Lightbox Enabled on Meta - now disabled

---

¿Todavía quieres usar la versión antigua?
Puedes hacerlo con la rama old-custom-lightbox.

[Mr.X_Mr.X]

Sería genial si se pudiera desplazarse deslizando hacia la izquierda y la derecha. Aparte de eso, gran tc.

[Don]

¡Gracias! Sí, eso sería genial, pero desafortunadamente Magnific Popup no admite gestos de deslizamiento.

[Don]

He actualizado el componente del tema y el OP.

[Don]

Hola

He actualizado este componente de tema

Esta actualización contiene lo siguiente:

1. Eliminar jQuery
2. Cambiar el color del tema a negro cuando se abre la lightbox. (por ejemplo, la barra de estado también será negra como el fondo de la lightbox)
3. Actualizar a los iconos de FontAwesome 6.
4. Usar cursores de zoom-in y zoom-out en la imagen.

He añadido un enlace de vista previa al OP.

[davidkingham]

Muy bien Don, ¿hay alguna posibilidad de que añadas una opción para colocar las flechas, el botón de descarga y el recuento de imágenes fuera de la imagen? En un sitio de fotografía no es bueno tapar partes de la foto, queremos ver la foto completa sin distracciones. No te preocupes si no es posible, ¡gracias!

[Don]

Gracias David, investigaré una solución

La idea es crear un nuevo botón de información para mostrar/ocultar la información de la imagen, como la descarga, la imagen original, el título y quizás un contador.

[davidkingham]

Gracias Don, estaba pensando más en algo así:

Pero también mover las flechas fuera de la imagen, lo que requeriría que la imagen fuera más pequeña para tener algo de espacio alrededor de los bordes.

La otra opción sería ocultar toda la información hasta que el cursor se mueva, no estoy seguro de si eso es posible.

[Don]

He recibido algo de inspiración de cómo se organiza con la nueva caja de luz y he creado un concepto

Creo que algo así probablemente podría funcionar.

1. Simplificar botones, cambiar posiciones, flechas más pequeñas
2. Añadir botón de pantalla completa y botón de información para mostrar la información inferior

[davidkingham]

¡Me encanta! Espero que puedas hacerlo funcionar

[Don]

Aquí está la actualización de este componente temático Aún no se ha fusionado, pero puedes probar cómo funciona en Theme Creator.

Cambios como mencioné en esta publicación Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don.

1. Botón de pantalla completa (también puedes activarlo con la tecla F)
2. Botón para mostrar/ocultar título
3. Mostrar solo el icono de zoom-out cuando has hecho zoom.
4. Ocultar flechas en dispositivos móviles
5. También se agregaron acciones de deslizamiento táctil para que sea más cómodo de usar en dispositivos con pantalla táctil.
   • deslizar a la derecha - imagen anterior
   • deslizar a la izquierda - imagen siguiente
   • deslizar hacia abajo - cerrar lightbox
6. Algunos ajustes de UX

Esta actualización también eliminará la configuración.

[davidkingham]

¡Se ve bien, Don! El único problema que veo es que cuando hago clic en las flechas de anterior/siguiente, se cierra la lightbox; si usas las flechas del teclado, funciona como se espera. Probé en varios navegadores y hace lo mismo.

[Don]

@davidkingham

cuando hago clic en las flechas anterior/siguiente, se cierra la caja de luz

Gracias, ya lo he arreglado. ¿Puedes comprobarlo?

[davidkingham]

¡Funciona ahora!

[Don]

Hola

He fusionado el nuevo lightbox personalizado

También he actualizado el OP…

FEATURE: New custom lightbox

[Don]

Hola

He fusionado una característica faltante para dispositivos táctiles: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

La navegación de imágenes funciona con gestos de deslizamiento, por lo que ahora podemos usar el clic de la imagen para activar/desactivar el zoom.

[Don]

Hola

¡Aquí tienes una nueva actualización!

Esta actualización incluye varias mejoras de diseño:

• Se eliminó el relleno alrededor del lightbox
• Las imágenes pequeñas ahora también se pueden ampliar
• Nuevo diseño de botón con fondo negro transparente, lo que hace que los botones sean visibles también en imágenes claras, etc.

---

Mejora de escritorio:

El desplazamiento de imágenes ampliadas en el escritorio, especialmente el desplazamiento horizontal, no era muy fácil ni fácil de usar.
Esta actualización introduce un mecanismo de desplazamiento que sigue al cursor para mejorar la experiencia.

---

DEV: Adds cursor follow mechanism for scrolling on desktop and some design update