Dreamweaver Using Lightbox

From TOI-Pedia
Example of the application of Lightbox in a website


  1. Get Lightbox
  2. Install it
  3. 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.

If you already have your own index.html file, be careful not to overwrite it!

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.


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:

Dreamweaver lighbox js header.jpg

You can go back to 'Design-mode' now.


Attach the lighbox Stylesheet to your page:

Open the CSS Panel at the right:

Dreamweaver csspanel.jpg

and click the Attach Style Sheet-button:

Dreamweaver design linkstyle.jpg

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:

Dreamweaver attach lightbox.css.jpg

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:

Dreamweaver tagchooser.jpg

When you've clicked your image, it would show something like this:

Dreamweaver tag breadcrumb img.jpg

Now click the a-tag:

Dreamweaver tag breadcrumb a before img.jpg

Now open the Tag Inspector panel at the right:

Dreamweaver taginspector.jpg

Make sure the Attribute tab is opened. Scroll to the Uncategorized section and open in. Change the rel' attribute to lightbox:

Dreamweaver taginspector a rel lightbox.jpg

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:

Dreamweaver taginspector a rel lightbox group.jpg

Of course you could also add the rel attribute to the anchor tags directly in Code-view. In the end it may prove to be faster once you are comfortable with finding your way in HTML-code.

Example website

You can download the source files for the example used for this tutorial here.

Personal tools