Saltar la navegación

Efectos Lightbox

Hemos mejorado la librería de efectos Lightbox. En esta actualización podremos hacer un efecto lightbox sobre una imagen en la que podremos mostrar imágenes y también vídeos. Se mantiene la posibilidad de crear galerías de imágenes manualmente.

También podemos crear un efecto Lightbox desde un enlace de texto, añadiendo al mismo rel="lightbox" (Siempre que se trate de un enlace a una imagen o un vídeo de Youtube).

Ejemplo: imagen - imagen

exe kids

Ejemplo de efecto LightBox sobre imagen. Al hacer clic nuestra una imagen.

Ejemplo: imagen - vídeo

exe kids

Ejemplo de efecto LightBox sobre imagen. Al hacer clic nuestra un vídeo.

Ejemplo: galería de imágenes y vídeos

  

Ejemplo de efecto LightBox sobre imágenes y vídeo en galería.

¿Cómo lo hacemos?

Imagen a imagen:

  1. Insertar la imagen.
  2. Hacer clic sobre la imagen insertada e insertar un enlace.
  3. En dirección de hipervínculo, examinamos y adjuntamos de nuevo la imagen.
  4. En la pestaña Avanzado > Relación página a destino seleccionamos la opción Lightbox.

Imagen a vídeo:

  1. Insertar la imagen.
  2. Hacer clic sobre la imagen insertada e insertar un enlace.
  3. En dirección de hipervínculo, pegamos la URL del vídeo de YOUTUBE.
  4. En la pestaña Avanzado > Relación página a destino seleccionamos la opción Lightbox.

Galería de imágenes y vídeos:

  1. Insertar imágenes.
  2. Hacer clic sobre cada imagen insertada e insertar un enlace.
  3. En dirección de hipervínculo, examinamos y adjuntamos de nuevo la imagen o pegamos la URL del vídeo de YOUTUBE.
  4. En la pestaña Avanzado > Relación página a destino seleccionamos la opción Lightbox por cada una de las imágenes.
  5. Abrimos el editor de código fuente y ponemos un mismo número entre corchetes a cada etiqueta rel="lightbox"

Así tendríamos que si la secuencia es:

<a href="actividad_generica_engranaje.png" rel="lightbox" title="Engranaje">
<img src="actividad_generica_engranaje.png" width="200" height="200" /></a>  
<a href="actividad_generica_estrella.png" rel="lightbox" title="Estrella">
<img src="actividad_generica_estrella.png" width="200" height="200" /></a>
<a href="https://www.youtube.com/watch?v=cI61i-fgkek&amp;list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&amp;
index=1" title="Vídeo de eXeLearning" rel="lightbox">
<img src="actividad_generica_exe.png" width="200" height="200" /></a>

El resultado sería:

<a href="actividad_generica_engranaje.png" rel="lightbox[1]" title="Engranaje">
<img src="actividad_generica_engranaje.png" width="200" height="200" /></a>  
<a href="actividad_generica_estrella.png" rel="lightbox[1]" title="Estrella">
<img src="actividad_generica_estrella.png" width="200" height="200" /></a>
<a href="https://www.youtube.com/watch?v=cI61i-fgkek&amp;list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&amp;
index=1" title="Vídeo de eXeLearning" rel="lightbox[1]">
<img src="actividad_generica_exe.png" width="200" height="200" /></a>