Qué es Ajax Lightbox

Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo 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):

"Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page." 

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.
• Imá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: IE/FireFox/Opera.

Cómo utilizarlo

1. Configuración

1. Ajax Lightbox utiliza dos librerías opensource: Prototype y Scriptaculous. 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 lightbox.js para configurar algunos parámetros del efecto:

   fileLoadingImage: Imagen de carga
   overlayOpacity: Nivel de transparencia de la capa
   overlayvar animate: Activa/Desactiva rescalable  animations
   resizeSpeed: Controla la velocidad de rescalado de la imagen (1 = muy lento y 10 = muy rápido)
   borderSize: Grosor del borde

2. Incluya 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.

2. 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>

Descá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.

• Ajax Lightbox v1.0

¿Le ha gustado este artículo?, ayúdeme a compartirlo.

En un enfoque tradicional sería necesario cargar en memoria todas las provincias y localidades, o dividir el proceso en dos fases: en la primera el usuario elegiría su provincia para luego seleccionar su localidad en un segundo paso. Un ejemplo de este enfoque tradicional es la web de páginas amarillas. Observe que el tiempo de carga de la página es considerablemente elevado.

Las nuevas técnicas de desarrollo web 2.0 nos ofrecen ahora la posibilidad de resolver este tipo de  funcionalidades de una manera mucho más elegante y eficiente.

Ejemplo de combo dinámico en Ajax 

En un enfoque 2.0 he desarrollado este ejemplo en el que puede ver un  formulario que permite al usuario seleccionar su localidad de manera muy rápida y eficiente. Ajax nos permite  trabajar con un documento XML de más de 2Mb que contiene todas las localidades de España, cargando en memoria únicamente la información que necesitemos en cada momento.

En el siguiente esquema se explica el funcionamiento de la aplicación Ajax:

Esta funcionalidad consta de los siguientes archivos:

• default.php: página incial dónde se generan dinámicamente el combo de provincias a partir del XML general.
• xml_data_provider.php: recorre el XML general y devuelve otro XML que contiene sólo las localidades de la provincia escogida.
• AjaxCode.js:  funcionalidad Ajax que lee el XML con las localidades elegidas y crea dinámicamente el combo de localidades.
• provinciasypoblaciones.xml: Archivo XML que contiene todas las localidades y provincias de España.

Esta misma funcionalidad puede utilizarla para manejar cualquier XML de gran tamaño que de otra forma se mostraría inmanejable y ralentizaría mucho el tiempo de carga de su Site: fichas de clientes, un catalogo de productos, etc.

El tiempo de carga de una página y el consiguiente tiempo de espera de un usuario es uno de los factores más importantes en el rendimiento de una web. Tal y como se desprende del estudio sobre usabilidad realizado por Peter Sevcik en Julio de 2002, el tiempo de carga de una página no debe dilatarse más de 10 segundos para mantener el nivel de satisfación del usuario dentro de los límites óptimos. A partir de este límite el usuario empieza a percibir que la página está tardando en cargar y cuando se rebasa los 40 segundos la fustración y pérdida de interes del usuario por la página aumenta de manera muy acusada.

El código.

En el siguiente archivo zip dispone de todos los ficheros y recursos que conforman la aplicación. Siéntase libre de utilizarlo en su página web. Si le resultó de utilidad  o encontró cualquier problema le agradecería mucho conocer su feedback.

¿Le ha gustado este artículo?, ayúdeme a compartirlo.