Lightbox 2, javascript para ver en una ventana las imagenes en grandes al hacer click
|
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds. |
Bueno, esta vez les vamos a explicar como poner un javascript en tu página que al hacer click sobre una imagen chica, se te habra del tamaño real con unos muy vistosos efectos y muy fácil de aplicar en las webs, sin necesidad de conocimientos previos de javascript, ya que les explicaremos paso por paso.
Bueno antes que nada tienen que descargar los codigos, imagenes y javascript para hcer todo esto, lo puede descargar desce aca. Les paso a explicar paso por paso lo que tienen que hacer:
1. Descomprimir el zip descargado y poner todos los archivos descomprimidos, menos el index.html en la carpeta donde se encuentra la web.
2. Copiar estos códigos a el encabezado de la web, ocea entre la etiqueta <head> y </head>
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"> </script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
2. Bueno, solamente es eso, lo que falta es agregar las imagenes que se quieren agrandar al darle click. Como se hace esto? bueno es simple, demes de poner el codigo común de:
<img src=”/images/image-1.jpg” alt=” ” />
Tenemos que suplantar lo común que siempre hacemos con las imagenes por este código.
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src=”/images/image-1.jpg” alt=” “ width=”150″ height=”80″/></a>
Lo unico que hay que cambiar es href=”images/image-1.jpg por la ubicacion y nombre de la imagen, haciendo lo mismo con src=”/images/image-1.jpg”, y en width=”150″ height=”80″ ponerle el tamaño y ancho deseado en la imagen chica previa.
EJEMPLO:
Comentarios
Tenes que redimensionar el tamaño de la imagen, la manera mas facil de hacerlo es con el paint que si usas algun sistema operativvo de microsoft como el xp esta, una vez abierta la imagen vas a image, expandir o contraer y le pones cuanto lo queres achicar a agrandar.
Saludos
hola mi consulta es que quiero cambiar el tamaño de la ventana que sale al hacer click en la imagen previa que linea del codigo javascript tengo que tocar muchas gracias