Lightbox

501 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
501
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lightbox

  1. 1. LIGHTBOX
  2. 2. 1-Entrar en: http://www.lokeshdhakar.com/projects/lightbox2/
  3. 3. 2-Descargar la carpeta comprimida
  4. 4. 3-Descomprimir la carpeta y crear un documento html dentro de esa carpeta 4-Encima de la etiqueta de cierre </head> escribir esto: <script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;> </script> <script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects,builder&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/lightbox.js&quot;></script> 5-Seguidamente se añade: <link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> 6-Ya dentro del <body> se añade el siguiente código para insertar imágenes: <a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;>image #1</a> 7-Después se pueden insertar tantas imágenes como quieras con éste código: <a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;>image #1</a> <a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;>image #2</a> <a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;>image #3</a> Nota: las imágenes tienen que estar en la carpeta images de la carpeta lightbox.
  5. 5. Quedaría algo parecido a esto:

×