Saltar la navegación

Efectos Lightbox

El efecto Lightbox nos permite hacer que, al pinchar en un texto o imagen, se abra una cuadro de diálogo con una imagen, un vídeo o un audio. Desde la versión 2.6 en el efecto Lightbox se pueden añadir también vídeos de la mediateca de EducaMadrid.

Veamos algunos ejemplos.

Ejemplo: imagen - imagen

exe kids

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

Ejemplo: texto - vídeo

El vídeo de eXeLearning  nos describe la herramienta.

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 el campo Rel seleccionamos la opción Lightbox

Imagen o texto a vídeo:

  1. Insertar la imagen o escribir el texto
  2. Hacer clic sobre la imagen insertada o sobre el texto a enlazar e insertar un enlace
  3. En dirección de hipervínculo, pegamos la URL del vídeo de YOUTUBE
  4. En el campo Rel 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>