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.
eXeLearning 2.1. Tutorial - Manual
Efectos Lightbox
¿Cómo lo hacemos?
Imagen a imagen:
- Insertar la imagen.
- Hacer clic sobre la imagen insertada e insertar un enlace.
- En dirección de hipervínculo, examinamos y adjuntamos de nuevo la imagen.
- En la pestaña Avanzado > Relación página a destino seleccionamos la opción Lightbox.
Imagen a vídeo:
- Insertar la imagen.
- Hacer clic sobre la imagen insertada e insertar un enlace.
- En dirección de hipervínculo, pegamos la URL del vídeo de YOUTUBE.
- En la pestaña Avanzado > Relación página a destino seleccionamos la opción Lightbox.
Galería de imágenes y vídeos:
- Insertar imágenes.
- Hacer clic sobre cada imagen insertada e insertar un enlace.
- En dirección de hipervínculo, examinamos y adjuntamos de nuevo la imagen o pegamos la URL del vídeo de YOUTUBE.
- En la pestaña Avanzado > Relación página a destino seleccionamos la opción Lightbox por cada una de las imágenes.
- 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&list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&
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&list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&
index=1" title="Vídeo de eXeLearning" rel="lightbox[1]">
<img src="actividad_generica_exe.png" width="200" height="200" /></a>
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0