Imágenes con AJAX
La clásica imagen en miniatura, que al clickearla se abría en una ventana pop-up o simplemente en una nueva, pasó a mejor vida. Ahora existen técnicas en AJAX mucho más atractivas y prácticas para manejar dicho proceso; e incluso de manera tanto o más sencilla que las anteriores.
Con Lightbox 2 podrás lograr que el fondo quede en segundo plano -capa gris- y la foto se abra dinámicamente en el mismo lugar, al mejor estilo 2.0 y sin necesidad de programar nada.
Instalación
El script se compone de 3 carpetas (css, images y js), las cuales debés subir en el mismo directorio donde se aloja el sitio. Hecho esto, debemos agregar en el Header el siguiente código:
Además, corresponde incluir el archivo CSS en la Stylesheet con este código:
Recuerden que, en WordPress por ejemplo, tanto Header (encabezado) como Stylesheet (hoja de estilos) se encuentran en Presentación > Editor de Temas. Si no utilizás gestores de blogs como estos, sólo tenés que incluir los códigos anteriores dentro del body.
Uso
Finalizada la instalación, pasamos a implementar Lightbox en el sitio o blog. Hay dos opciones disponibles; mostrar una sola imagen o varias. En el primer caso, usamos esto:
En el segundo, se debe escribir:
Personalizar
Terminemos con un pequeño tip. Ya que el script se presta bajo licencia CC Attribution 2.5 -admite modificaciones-, podés personalizarlo un poco, alterando la imagen que se muestra al cargar (el famoso circulito) por otro gif animado de tu autoría. Una vez realizada la imagen -con Ulead Gif Animator por ejemplo- guárdala con el nombre "loading.gif" en la carpeta images.
Por otro lado, también es posible cambiar la imagen que se ubica debajo de la foto, es decir, la cruz con el texto close; para ello guardá la nueva con el nombre "closelabel.gif" siempre en la misma carpeta. Y lo mismo se puede hacer con la imagen next si se trata de galerías ("next.gif"). Obviamente, en todos los casos la idea es reemplazar a la anterior sin tocar el código original.
Demo | Descargar Lightbox 2 | Web