Desarrollo web: Ampliar imágenes con JavaScript
16 de octubre de 2007
Este pequeño tutorial nos enseña cómo abrir imágenes de forma muy atractiva utilizando JavaScript.
Es el mismo que utilizo en mi galería de fotos, así que allí mismo pueden ver el ejemplo funcionando.
.
Pasos para la instalación
- Descargar Lightbox 2.0
- Incluir el siguiente código en el tag <head>
- Incluir el archivo CSS en el <head>
- Chequear que las rutas a los archivos arriba mencionados (y a prev.gif, next.gif, loading.gif, close.gif) tanto en el html, en el js y en el css, estén correctas.
- Agregar en cada link de imágen que queramos abrir con este sistema el siguiente código: rel=”lightbox”
<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>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
Ej.: <a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>
Si tienes una secuencia de imágenes vinculadas, puedes usar rel=”lightbox[album]” para vincularlas entre si, de modo que quedarán de la siguiente manera:
<a href=”images/image-1.jpg” rel=”lightbox[parque]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[parque]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[parque]“>image #3</a>
.
