Internet Ajax

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

Ajax Lightbox utiliza dos librerías opensource: Prototype y Scriptaculous. Por tanto debe incluirlas en la cabecera de su página:

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

Añada un atributo rel=”lightbox_text” a cualquier enlace que apunte a una página web para activar el efecto:
Ver nota
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:
ajax_lightbox.rar.borrar

Anuncios
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: