Suscríbete a nuestro RSS Feed
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:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Además, corresponde incluir el archivo CSS en la Stylesheet con este código:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
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:
<a href="images/imagen-1.jpg" rel="lightbox"</a>
En el segundo, se debe escribir:
<a href="images/imagen-1.jpg" rel="lightbox[roadtrip]"</a>
<a href="images/imagen-2.jpg" rel="lightbox[roadtrip]"</a>
<a href="images/imagen-3.jpg" rel="lightbox[roadtrip]"</a>
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.
Mauro Borione
Suscríbete a nuestro RSS Feed
hola a todos…
la cuestion esta muy buena , es exelente…
me gustaria saber como hago para llamar un pagina desde el moemnto que le doy click a una de las imagenes como por ejemplo actualizar el numero de visitas en la base dedatos para esa imagen que seleciono.
gracias.. le agradesco supronta respuesta..
mi correo es este…. wmexier@hotmail.com.. le agradesco cualquier cosa… que tengan un buen dia ..
Si está bien, pero como cargar una imagen dinámicamente con AJAX, me explico, la pagina está cargada y hay una imagen que se genera bajo petición ¿como se carga ese contenido binario dentro de la pagina via AJAX?