Lightbox2 is a great way to add a stylish and easy to navigate image gallery slide show to your project. Its free and fairly easy to set up.
Art by Nick LA: http://www.ndesign-studio.com/
1. The first thing you need to do is download the set up files from:
http://www.huddletogether.com/projects/lightbox2/
2. After you download the lightbox2 folder, open it and identify the files you will need.
You should see the following folders. Copy and paste the “css” and “js” folders into your “Root” folder. If you already have an images folder in your existing root folder, then open up the images folder and copy all the images inside. Paste the contents of the lightbox images folder into your website images folder.
3. You may keep the index.html file as a reference but please do not copy it into your root folder. You may open it up and use it to copy and paste the JS links and for further instructions.
4. Using Photoshop, make two version of every image you would like to use for the slide show. When naming your files use a number after the filename in the order you would like them to be arranged.
For example your thumbnail images: imgthumb_01.jpg, imgthumb_02.jpg, imgthumb_03.jpg
Large Images: img_01.jpg, img_02.jpg, img_03.jpg
Make sure you save all of your images into your “images” Folder
5. Add the thumbnails to your page. In Dreamweaver open the page you would like to have your gallery and insert your thumbnails. Go to insert > insert image>. Keep doing these step until you have the desired amount of images added.
6. Open up your style sheet “styles.css” and add a Thumbnail Image class:
.thumb_img{
margin: 10px;
}
7. Select each thumbnail and then go to the class box in your properties inspector.
From the list select “thumb_img” If you would like to adjust the margin or add a border to your thumbnails toy may do so by opening up the CSS editor located on the top right window. Double click onto the class “.thumbnail_img” to edit.
8. Link each thumbnail image to it’s large version image.
9. Add the lightbox scripts to your HTML. Open up the original “index.html” file that came with the lightbox folder when you first downloaded it. Copy and paste the javascript links into your head tags. Followed by the lightbox css link also in side the head tags.
<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” />
</head>
10. To activate lightbox you will need to add the following attribute to any link tag.
For example: rel=”lightbox” title=”my caption”
11. Save and preview in your browser to make sure it works.
12. To make a set of images add the following attribute to any link tag:
rel=”lightbox[roadtrip]” title=”my caption”
You can name the set whatever you want. To make multiple sets, just give each linked thumbnail a different set name and the images associated with t will appear when you preview the.
That’s it!
