estos son los pasos:
Directions
Step 1: Insert the below code in the HEAD section of your page:
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>Step 2: Create your "thumbnail" HTML code. Three basic flavours are supported:
<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a><a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a><a href="dan.jpg" rel="lightbox" title="My best friend Dan">Dan</a>As you can see, the thumbnail code just consists of a standard <A> tag with its "href" attribute set to the image to show, an extra attribute rel="lightbox" to separate this link from ordinary links, and finally, an optional "title" attribute that will show a caption if set. You're free to use either a thumbnail image or text link as the interface to launching the enlarged image.
Step 3: Last but certainly not least, this script is made up of a few external files/images, as referenced in the code of Step 1. Download lightbox.zip, and upload its contents to a folder on your site. Then make sure the paths used in the code of step 1 correctly points to this directory. FYI, lightbox.zip contains these files:
lightbox.js - the main script.
lightbox.css - basic style and tricky PNG support.
overlay.png - 80% opacity, black tile used to create shadow.
loading.gif - mock status bar used in examples above.
close.gif - 'X' graphic placed in top-right corner.
That's it! Enjoy this superb script.
Notes
Inside lightbox.js, there are two configurable variables:
var loadingImage = 'loading.gif'; //path to the "loading animation" image
var closeButton = 'close.gif'; //path to the "close" button image
luego pruebo a ver q' tal ;)
gracias