c



 

  
 

Durante el desarrollo de mi último proyecto he tenido la suerte de conocer un fantástico efecto

2.0 desarrollado por Lokesh Dhakar. Se trata de un efecto Lightbox que permite mostrar
espectaculares pop-ups con imágenes y grupos de imágenes. Las características del código original
no eran suficientes para el proyecto en el que trabajaba, así que tuve que ampliarlo para que fuera
capaz de mostrar pop-ups que cargaran dinámicamente de un fichero. De este modo nació el que
he bautizado como Ajax LightBox, espero que les sea de tanta utilidad como a mi.

Qué es Ajax Lightbox

Ajax Lightbox es un script ÷
÷
que permite mostrar una ventana por encima del contenido
actual de una página. El término ÷
÷
se utiliza para denominar al código javascript que no
se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el
documento, permitiendo conseguir independizar completamente ͞Contenido, Presentación y
Comportamiento. Comentar también que un script no intrusivo permite cumplir con el punto de
verificación 6.3 de las normas de accesibilidad WCAG (prioridad 1, necesario para nivel A):

 ÷









÷
 
 




 




÷




÷ 
 




÷ 


 



÷
÷  ÷
÷
÷

÷








Como puede observar en el siguiente ejemplo, usted puede visualizar tres tipos diferentes de
ventanas:

˜ Contenido dinámico extraido vía Ajax de un fichero.

˜  mágenes individuales.
˜ Grupos de imágenes.

Si conoce algo de javascript y css puede personalizar el efecto para ajustarlo a sus necesidades:

Ha sido testeado en las últimas versiones de los navegadores más extendidos:  E/FireFox/Opera.

º
o utilizarlo

1. ºonfiguraci n

1. Ajax Lightbox utiliza dos librerías opensource: Ñ  

y   . Por tanto debe
incluirlas en la cabecera de su página:

<script type="text/javascript" xsrc="js/prototype.js" mce_src="js/prototype.js"></script>

<script type="text/javascript" xsrc="js/scriptaculous.js?load=effects"
mce_src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" xsrc="js/lightbox.js" mce_src="js/lightbox.js"></script>

Puede modificar la librería
  para configurar algunos parámetros del efecto:
 
 ÷
  magen de carga

  Nivel de transparencia de la capa


÷

Activa/Desactiva rescalable animations

!


: Controla la velocidad de rescalado de la imagen (1 = muy lento y 10 = muy

rápido)
 
!
: Grosor del borde

2.  ncluya también la hoja de estilos lightbox.css añada los estilos a la hoja de estilos actual
de su Site. Puede modificar los estilos para cambiar las características del efecto (Colores,
tamaños, etc).

<link rel="stylesheet" xhref="css/lightbox.css" mce_href="css/lightbox.css"

type="text/css" media="screen" />

Es importante que compruebe dentro de la hoja de estilos que las imágenes están siendo
referenciadas a las ubicaciones correctas.

u. Activaci n

1. Añada un atributo rel="lightbox_text" a cualquier enlace que apunte a una página web
para activar el efecto:

<a xhref="nota.htm" mce_href="nota.htm" rel="lightbox_text" >Ver nota</a>

2. Añada un atributo rel="lightbox" a cualquier enlace a una imagen en el que quiera activar
el efecto. Puede incluir un atributo title si quiere visualizar un caption en la ventana:

<a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox" title="Los

recursos de HelloGoogle son la pera">imagen #1</a>

3. Si quiere agrupar un conjunta de imágenes, incluya un nombre de grupo dentro de unos

corchetes en el atributo rel:

<a xhref="images/image-1.jpg" mce_href="images/image-1.jpg"

rel="lightbox[mi_grupo]">imagen #1</a>
<a xhref="images/image-2.jpg" mce_href="images/image-2.jpg"
rel="lightbox[mi_grupo]">imagen #2</a>
<a xhref="images/image-3.jpg" mce_href="images/image-3.jpg"
rel="lightbox[mi_grupo]">imagen #3</a>

escárgueselo

El código se ofrece bajo la licencia Creative Commons, esto significa que puede utilizarlo y
modificarlo libremente en sus aplicaciones. Solamente debe mantener los créditos tal y como
están, para reconocer la labor de sus autores.
Espero que este efecto le sea de tanta utilidad como a mi, y que a partir de ahora pueda
sorprender a sus visitantes con este Ajax Lightbox 2.0.

http://www.hellogoogle.com/examples/ajax_lightbox/ajax_lightbox.rar