How to Make a Light Box in Dreamweaver

A light box offers web developers flexibility in inserting images on a web page. The images used in a light box essentially appear above a web page, not within it. A light box is effective because it allows a person using your web page the ability to click on a small image and then have that image made larger in a shaded box on top of the open page. This keeps the web user on your page but allows you to place more images on a page without using as much space. You can make a light box in Dreamweaver by inserting the correct coding in the proper place on the page.

Things You'll Need

• Adobe Dreamweaver
• Computer

Instructions

1. Open Dreamweaver. Select "Ctrl+N" then "Blank HTML Document" to open a new blank page. Click on the "Code" tab to get to the right place to work with the light box code.

2. Cut and paste the following code into the "Head" section of the Dreamweaver document:

   <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. After inserting this code, you must place the links for the thumbnail images on the page. These are the photos that the light box enlarges. Use this code for each image:

   <a href="images/yourfirstimage.jpg" rel="lightbox" title="put your caption here">image name goes here</a>

   This code should be placed just underneath the previous code.

4. Click on the "Preview" button at the top of the Dreamweaver window to see how this page works in a web browser. If you are pleased with how it looks, proceed to the next step. If you are not pleased, make modifications and check again.

5. Use "Ctrl+A," "Ctrl+C" and "Ctrl+V" to select, copy and paste the complete code that has been created in Dreamweaver. This code can be pasted into the HTML edit box in the back end of whichever web server you use to publish your web page. Once this is completed, the images will be published and can be opened in your light box.

Tips & Warnings

• Be sure to upload all the individual images onto the server. Images must be large enough--generally at least 500k--to be of decent quality when opened by the light box code.

• Make sure to include all quotation marks in the light box code. One missing quotation mark can disable the whole code.

Resources

• Lightbox creation overview
• Lightbox image viewer