Dreamweaver Using Lightbox
Contents
Outlines
- Get Lightbox
- Install it
- Set links to use the Lightbox overlay system using the rel attribute
Installing the Lightbox files
Download the Lightbox zip-file. Save it in the folder where you're building your website.
Extract the zipfile there. It contains a folder 'js' with the required scripts, a folder 'css' with the required Stylesheet and an optional 'index.html' example.
Once the ZIP-file is extracted, you may remove it as it is no longer needed.
Integrating the Lightbox system in your website using Dreamweaver
The Lightbox system consists of two parts: the Javascipts and a CSS Style Sheet.
Javascripts
The easiest way to integrate the Lightbox scripts in you page is to use the Code-view.
Enable either the Split- or Code-view and scroll to the top of the code. You'll find the <head> and </head> tags there.
Insert the following lines just before the </head> tag:
<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>
The result should look something like this:
You can go back to 'Design-mode' now.
Stylesheet
Attach the lighbox Stylesheet to your page:
Open the CSS Panel at the right:
and click the Attach Style Sheet-button:
Click Browse and go to the css folder in your website root folder. Select the lightbox.css file and click Ok.
Make sure Add as is set to Link:
Click Ok to finish. You're now all set.
Setting up your images to use Lightbox
Embed your images as thumbnails, linking to the high-resolution versions, just as you would normally do.
To set the image to display in Lightbox, you need to add the rel attribute to the link.
Click the image
Dreamweaver shows the tag-hierarchy of the element you're working on:
When you've clicked your image, it would show something like this:
Now click the a-tag:
Now open the Tag Inspector panel at the right:
Make sure the Attribute tab is opened. Scroll to the Uncategorized section and open in. Change the rel' attribute to lightbox:
That's it! You can save your page and preview it in a browser (F12) to test if it works.
Optionally you could also set the title attribute for the link. This value will be displayed as an image caption by Lightbox.
Image series
Lightbox can also work with image series, providing links to the previous and next images. To us this, you need to include the groupname in the rel attribute. For example:
Example website
You can download the source files for the example used for this tutorial here.
