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>
.
(comentario del 12/3/2008)
hola!!
Felicidades por este blog.. una consulta para crear el albun todo va bien sólo que no aparecen las imagenes de avanzar entre imagenes. podrias ayudarme
(comentario del 22/5/2008)
Muy bueno tu aporte, facil y al grano… mil gracias!
(comentario del 14/6/2008)
Cordial saludo.
Excelente material para mostrar fotografias.
Muy bien elaborado, y realmente sencillo de usar.
Felicidades por su profesionalismo.
(comentario del 23/10/2008)
Muy buen blog, y exelente tuto, pero solo un detalle como le harias para bloquear la pagina actual mientras ves la imagenes. Pues si le das atras se regresa a la anterior pagina y la imagen sigue aun estando visible. Lo ideal seria bloquearla para que tengas que cerrar afuerza la imagen para continuar.
Ppero del todo muy bien.
(comentario del 23/10/2008)
Hola Gilberto, me alegro que te haya servido, sobre lo que comentas de “bloquear” la página, estoy casi seguro que no es posible bloquear el boton de “atras” del navegador con javascript..
Saludos y gracias a todos por sus comentarios.
(comentario del 27/5/2009)
Porque aparece 1.02.03
(comentario del 24/6/2009)
Muchas Gracias!
Me ha sido muy util y queda un efecto muy chulo
(comentario del 7/10/2009)
Gracias por el aporte lo estaba buscando desde hace mucho tiempo, ME ha sido de gran utilidad.
(comentario del 20/2/2010)
Está muy bien, pero:
YO soy nuevo en este mundillo y nos se con que herramienta crean estas animaciones. Solo que me ha pasado que al poner estas animaciones con sliders estos entran en conflicto. Pienso que es problema de varias funciones con el mismo nombre en un mismo espacio.
(comentario del 22/8/2010)
Hey, muy buen aporte, lo he estado probando y me funciona. Pero tengo una duda, mi pagina que tengo como galeria de imagenes se abre dentro de un frame de la pagina principal y cuando pico para mostrar la imagen ampliada el fondo negro solo se carga en el frame, he intentado poniendo las referencias de js en el head de la pagina contenedora pero no da resultado, ¿sabes como podria hacer para que el fondo ocupara toda la web completa?. Un saludo. Gracias de antemano.
(comentario del 30/10/2010)
hola me gusto la galería script pero una coas yo estoy haciendo una web en la que la gente pueda colgar sus imágenes la galería esta genial pero hay gente que pone las imagenes en diferentes tamaño de pixel hay forma de cuando se vea la galeria solo se de atomatico un formato de 600px.
(comentario del 18/11/2010)
Perfecto y a la primera. me a gustado mucho.,,pero como siempre en esto ay dudas:
SE PUEDE HACER LO MISMO EN UNA WEB CREADA EXCLUSIVAMENTE CON FLASH??
(comentario del 13/1/2011)
Muy buen aporte tenia tiempo buscando algo así solo una pregunta: en donde debo modificar el tamaño con el que se muestra la imagen o eso va relacionado con el tamaño de la misma? Gracias
(comentario del 25/1/2011)
GRACIAS POR EL APORTEE! ME SALVASTE, HACIA MESES QUE BUSCABA ALGO ASI! GRACIAS DE NUEVO!
(comentario del 17/2/2011)
GENIAL! muy bueno!!!! gracias tronco
(comentario del 28/10/2011)
Excelente el tuto lo que estaba buscando desde hace mucho! pero revisando tu galeria en este tutorial no colocastes lo de PREV y NEXT y la verdad me gustaria saber como funciona. De antemano te lo agradeceria y sigue así que gracias a ayudas como estas salimos de muchos problemitas jeje… Dios lo bendiga!!!