Photoshop Templates 
Resources
inserting Lightbox in dreamweaver
Learn how to easily insert lightbox for your images in Dreamweaver.
Lightbox is a simple, unobtrusive script used to overlay thumbnail images on the current page.
When a user clicks on the thumbnail, a larger preview opens with the option of captions and links.
Lightbox is a plugin for jQuery. It was developed by Lokesh Dhakar.
EXAMPLE
Single Images (click on images)
 |
 |
Grouped Images (click on images)
 |
 |
 |
 |
SETUP
- Lightbox uses the Prototype Framework and Scriptaculous Effects
Library. You will need to download these files and include these three Javascript files in the
header of your html page (between the head tags <head> </head> in this order).
<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>
- Include and link your html page to the Lightbox CSS file (or append your active stylesheet
with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
INSERTING THE CODE
- Add a rel="lightbox" attribute to any link tag to
activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Tip: Use the title attribute if you want to show a caption.
- If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[thailand]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[thailand]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[thailand]">image #3</a>
There is no resrtiction to the number of image sets per page or how many images are allowed in each set.
- If you find that the prev.gif and next.gif are not displaying in the larger preview, then open the style sheet named 'lightbox.css' in Dreamweaver and change the paths of these images to point to your main images folder of your site.
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
Copy and paste these two images to this main images folder.
Save the 'lightbox.css' file to your main folder where your html file reside. Your html file should inseatd point to:
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
