Guía / Artículo

Galerías Lightbox

Noah
30 de octubre de 2020
Galerías Lightbox

Caja de luz inicial

1. Lo primero que podemos hacer es simplemente enlazar la hoja de estilo Magnific Popups.

Copie el código de abajo y péguelo en la sección de código personalizado "Inside tag"



2. Lo siguiente que tenemos que hacer es enlazar a la magnífica biblioteca de Javascript Popup usando un CDN para hacerlo más fácil.

Copie el código de abajo y péguelo en la sección de código personalizado "Antes de la etiqueta"


3. Por último, todo lo que tenemos que hacer es copiar y pegar el script de abajo para iniciar la caja de luz. Simplemente pegue este script justo debajo del código que hemos copiado arriba.

Copieel código de abajo y péguelo en la sección de código personalizado "Before tag"


¡Eso es! ¡Literalmente! 🤙🏼

Ese es todo el código que se necesita para hacer que la caja de luz del video funcione con el CMS.

Donde dice ".video", esa es la clase a la que el guión se refiere para usar la caja de luz. Puedes cambiar eso a lo que quieras y usar esa clase para iniciar el pop-up de ese elemento.

NOTA: El plugin necesita un enlace para referirse a la fuente del medio para trabajar. Por lo tanto, si es un vídeo, utilice el elemento "Link Block" y vincule el CMS con la URL del vídeo como se muestra a continuación.

Puede ver que está tomando la fuente (URL) de una colección de CMS.

También puede ver que la clase para ese bloque de enlace es "video", que obviamente puede usar lo que quiera.

También estoy sacando la imagen de fondo de la misma colección de CMS.

La caja de luz (Magnific Popup) se inicia escribiendo el código de abajo.


‍‍

Necesitamos iniciar una nueva instancia para cada galería que tenemos en el sitio. Para esta página se ve así:


ESPECIFICAR EL TIPO

Now all we have to do is specify the type of gallery or media it is. For video it would be an "iframe". For photos it would be "image". To do this we break up the curly brackets "{ }" and write this in between:

tipo: 'iframe

CREAR GALERÍA

Para convertir cualquier pop-up en una galería, todo lo que tienes que hacer es añadir el código de abajo bajo el código de arriba entre esos corchetes. Va a convertir cualquiera de los elementos que tienen esa misma clase en una galería.

gallery: { enabled: true}

Photo Lightbox

La configuración de la galería de imágenes fue un poco más complicada y requiere el elemento de "código de incrustación". He aquí por qué, Magnific Popup necesita un link src o href para llamar a la imagen. Por alguna razón cuando usamos el elemento de imagen dentro o fuera de una lista de colección no parece que use un href para sacar la imagen. Lo está haciendo de otra manera o simplemente proporcionando el enlace "src". Pero con el elemento Embed Code podemos especificar el src y el href que serán la misma opción dinámica que se muestra en la imagen de abajo.


Sugiero que busque en el Diseñador para ver cómo configuro la lista de colecciones para el código de incrustación para que las fotos funcionen. Los quería como cuadrados y así se puede ver la imagen se ve estirada en el diseñador pero para arreglar eso añadí una línea de código CSS como se muestra abajo. Esto hace que las imágenes se ajusten proporcionalmente mientras se llena todo el espacio.


Noah
30 de octubre de 2020

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.