Lightbox Dreamweaver Extension

Overview |
Tutorial

Lightbox Extension tutorial

Basically how the extension works is you insert an image(s) onto your page. Select the image and in the Dreamweaver Property Inspectors Link field browse to the larger image that you want to display in the lightbox.

Then, with the image selected, open the Lightbox Interface and make your selections.

Apply Lightbox
- How to apply the Lightbox ( no Image Sets )
  
  Single Image Display
  1. The first thing you need to do is link the larger image from the smaller image. Similiar to how you link to other pages in your site but with this you are linking to the larger image instead.
  2. To do this, select the small image that is on your page, and in the Link Field of the Property Inspector , or "Properties", ( screenshot below ), browse to the larger image that you want to display in the lightbox when clicked.
  3. Open the Lightbox Lightbox Interface
  4. Enter in your caption in the Caption Field ( if desired ).
  5. Press the OK button.
Create an Image Set
- 1. The first thing you need to do is link the larger image from the smaller image. Similiar to how you link to other pages in your site but with this you are linking to the larger image instead.
  2. To do this, select the small image that is on your page, and in the Link Field of the Property Inspector , or "Properties", ( screenshot below ), browse to the larger image that you want to display in the lightbox when clicked.
  3. Open the Lightbox Extension Interface.
  4. Type in a name for the set in the Image Set Name field and press the Add to Selected Set button.
  5. The Image Set name will appear in the Image Sets List, and indicate that there is (1) image in this total set.
  6. Enter in your caption in the Caption Field ( if desired ).
  7. Press the OK button.
Adding additional Image Sets
- 1. The first thing you need to do is link the larger image from the smaller image. Similiar to how you link to other pages in your site but with this you are linking to the larger image instead.
  2. To do this, select the small image that is on your page, and in the Link Field of the Property Inspector , or "Properties", ( screenshot below ), browse to the larger image that you want to display in the lightbox when clicked.
  3. Open the Lightbox Extension Interface.
  4. Press the Add New Set button to add a new set entry.
  5. Type a name for the set in the Image Set Name field and press the Add to Selected Set button.
  6. Enter in your caption in the Caption Field ( if desired )
  7. Press the OK button.
Adding image to an existing Image Set
- 1. The first thing you need to do is link the larger image from the smaller image. Similiar to how you link to other pages in your site but with this you are linking to the larger image instead.
  2. To do this, select the small image that is on your page, and in the Link Field of the Property Inspector , or "Properties", ( screenshot below ), browse to the larger image that you want to display in the lightbox when clicked.
  3. Open the Lightbox Extension Interface.
  4. Select the Image Set from the Image Sets List you wish to apply the image to and press the Add to Selected Set button.
  5. Enter in your caption in the Caption Field ( if desired )
  6. Press the OK button.
Remove Lightbox from Link
- 1. Select your image or text link for which you wish to remove from the Lightbox.
  2. Open the Lightbox Extension Interface.
  3. Check the Remove Lightbox from Link checkbox.
  4. Press the OK button.

The Lightbox Assets

When you insert a Lightbox into your page all of the ecternal files are created and neatly placed into a folder in the root of your site named lightbox_assets.

All of the Lightbox files that are needed are inside of this folder, not including the images you use for the Lightbox to display. Make sure you upload this folder to your server after creating your Lightbox.

Lightbox Assets

4LevelWebs Dreamweaver Extensions and Development

Lightbox Extension tutorial

How to apply the Lightbox ( no Image Sets )

Single Image Display

The Lightbox Assets

extension Information

Extension useage info

Featured Products