Añadir lightbox "Facilmente" - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder

Añadir lightbox "Facilmente"

¿Cómo puedes hacerlo?

El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.

Dependiendo de las necesidades o requerimientos, puede ser quieras añadirlo por defecto a todas las imágenes, solamente a algunas o solamente a las que pertenezcan a cierta característica o plantilla. Sea cual sea el caso, el procedimiento es el mismo, simplemente variando la posición del código, posicionándolo dentro de la plantilla principal, normalmente la que contenga el header con el menú y el footer o bien dentro de una plantilla secundaria para que solo sea aplicado a las imágenes que contengan las entradas o páginas que irán manejadas en base a esa plantilla.
Aquí vamos a explicar el proceso siguiendo el caso de sea aplicable a todas las imágenes de la página pero que serán discriminadas por tener o no cierta clase.
Paso 1 - Carga de archivos

Se añade un Code-Bolck en la parte más alta del panel de estructura, o bien se aprovecha uno ya existente, en la parte de HTML/PHP se añaden las siguientes dos líneas para cargar vía CDN los archivos Fancybox, también se pueden descargar y cargarlos localmente.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
Paso 2 - Código JavaScript

Se añade un Code-Bolck en la parte más alta del panel de estructura, o bien se aprovecha uno ya existente, en la parte de HTML/PHP se añaden las siguientes dos líneas para cargar vía CDN los archivos Fancybox, también se pueden descargar y cargarlos localmente.

window.addEventListener('load', ()=>{
if (window.angular) return;
  const imgsInst = document.querySelectorAll('.imgLbx')
  imgsInst.forEach((imgI)=>{
    imgI.dataset.fancybox= "iframe"
    imgI.dataset.type= "image"
    imgI.dataset.src= imgI.src
  })
})
Procedimiento

El código JavaScript lo que hace es buscar todas las imágenes que tengan la clase "imgLbx" y le añadirá los atributos necesarios para el funcionamiento del LightBox, como ya habrás imaginado, tendrás que añadir esa clase a todas las imágenes que quieras que tengan ese efecto. 
Si lo que se pretende es que todas y cada una de las imágenes que estén dentro de la página o entrada, y estas fueron editadas directamente en el editor de WordPress, en el código anterior habrá que sustituir la tercera línea por esta otra que se muestra justo abajo.

const imgsInst = document.querySelectorAll('.text-post-container img')

Pero si lo que se quiere es añadir el efecto a las imágenes que han sido añadidas a las entradas y/o páginas editadas con Oxygen se reemplazará la misma línea mencionada anteriormente con la siguiente:

const imgsInst = document.querySelectorAll('.ct-inner-content img')

Y ya está, ya tienes todo listo para incluir el efecto LightBox a tu página sin necesidad de añadir más plugins al sitio.

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌

0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
Imagen de Fondo Archivo de Categorías

Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.

Leer más
Botón de Todos los Templates

Se echa de menos un botón que estando en la sección "Edit Template" nos lleve directamente a la página de Templates que es donde se muestra todo el listado de plantillas de Oxygen, parece que alguien se ha olvidado de este detalle que debería estar implementado nativamente y a veces hasta fastidia un poco tener que cargar dos páginas para llegar ahí estando en la sección de edición de template.

Leer más
Cálculo Automático de cuotas para Woocommerce

Con un pequeño código de JavaScript podemos tener la funcionalidad del cálculo y salida en pantalla de la cantidad resultante de las cuotas correspondientes cuando se cambia a una variante de un producto con un precio diferente.

Leer más