Saltar navegación

Efectos Lightbox

Cando traballamos os efectos efecto vimos tamén o efecto Lightbox, pero neste apartado tratarémolo con maior profundidade e veremos con detalle como crear unha galería Lightbox.

O efecto Lightbox permítenos facer que, ao picar nun texto ou imaxe, ábrirase un cadro de diálogo cunha imaxe, un vídeo ou un audio. Vexamos algúns exemplos.

O efecto "lapelas" permite presentar varios aspectos sen cambiar de páxina cun simple clic. Vexamos como queda o acordeón do apartado anterior convertido en lapelas.

Exemplo: texto - imaxe

Como primeira opción do acordeón imos a mostrarcomo podemos enlazar un imaxe lightbox cunha parte dun texto (texto-imaxe):

A célula (do latín cellula, diminutivo de cella, ‘cela’) é a unidade morfolóxica e funcional de todo ser vivo. De feito, a célula é o elemento de menor tamaño que pode considerarse vivo.​ 

Exemplo: imaxe - imaxe

Exemplo de efecto LightBox sobre imaxe. Ao facer clic amplía a imaxe.

Célula animal


OpenStax College. Célula animal (CC BY-SA)

Exemplo: imaxe - vídeo

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

Célula animal

OpenStax College. Célula animal (CC BY-SA)

Exemplo: galería de imaxes e vídeos

Exemplo de efecto  LightBox sobre imaxes e vídeo en galería.

                  

Créditos imaxes:

Como facemos?

Imaxe a imaxe:
 
  1. Inserir a imaxe
  2. Facer  clic sobre a imaxe inserida e inserir unha ligazón
  3. En dirección de  hipervínculo, examinamos e achegamos de novo a imaxe
  4. No campo  Rel seleccionamos a opción  Lightbox
Imaxe ou texto a vídeo:
 
  1. Inserir a imaxe ou escribir o texto
  2. Facer  clic sobre a imaxe inserida ou sobre o texto para enlazar e inserir unha ligazón
  3. En dirección de  hipervínculo, pegamos a URL do vídeo de YOUTUBE
  4. No campo  Rel seleccionamos a opción  Lightbox
Galería de imaxes e vídeos:
 
  1. Inserir imaxes
  2. Facer  clic sobre cada imaxe inserida e inserir unha ligazón
  3. En dirección de  hipervínculo, examinamos e achegamos de novo a imaxe ou pegamos a URL do vídeo de YOUTUBE
  4. Na pestana Avanzado > Relación páxina a destino seleccionamos a opción  Lightbox por cada unha das imaxes
  5. Abrimos o editor de código fonte e poñemos un mesmo número entre  corchetes a cada etiqueta  rel=" lightbox"
Así teriamos que se a secuencia é:
<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>

O 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>