Como actualizo esto de vez en cuando, puede que quieras ver el ejemplo en vivo de los últimos cambios. Puedes ver el resultado final 1.1k o mirarlo en el diseñador (compartir enlace) 458 para aquellos que quieran profundizar un poco más en él.

La falta de soporte de CMS para la característica de lightbox ha sido algo molesto, sin embargo hoy he elaborado una solución completamente funcional! Todo lo que se necesita es una simple incrustación de HTML y usted tendrá una caja de luz en funcionamiento que se actualiza con su colección de CMS.

Paso 1: Crear una lista
dinámica Paso 2: Conectarse a su colección
de CMS deseada Paso 3: Insertar el HTML incrustado en el elemento dinámico
(galería-contenedor y galería-elemento son sólo mis nombres de estilo para mi galería)

Paso 4: Añadir el código HTML:
El texto completo está disponible para ser copiado al final de esta publicación.

Para obtener este código he creado una caja de luz estándar como prueba y luego he copiado el código del Inspector de Chrome. Eliminé un par de códigos del script para el ancho y el alto que arruinarían algunas de mis otras imágenes, y añadí campos dinámicos para la url de la imagen que quería.

IMAGEN EN MINIATURA - Utilicé la misma imagen de mi miniatura y de la toma completa mientras probaba esto, pero en la implementación apropiada de esto haría una imagen en miniatura en la plantilla de mi colección, y la pondría en el

Grupo Lightbox - también puedes especificar un grupo lightbox para enlazarlos todos juntos. No lo hice en esta versión, pero reemplazarías la "galería de fotos" por un campo dinámico, o puedes dejarlo así si sólo tienes un lightbox en tu página.

Paso 5: Guardar y cerrar.
El sitio web publicado debería tener ahora una galería de fotos en funcionamiento!

TEXTO HTML

class="w-inline-block w-lightbox" href="#">
 <img src="(image-thumbnail-field)" />
 <script class="w-json" type="application/json">
   {
     "group": "(your-group-name)", "items": [{
       "_id": "57e0683ebfc7a6d0523235b2",
       "cdnUrl": "(image-field)",
      "type": "image",
      "url": "(image-field)"
     }]
   }
 script>
a>

Espero que esto ayude a algunas personas!

‍