How to add Lightbox with the EC Toolset

Steps to setting up a Lightbox gallery with the EC Toolset

Click Cactus for Working Example

In this tutorial we step you through the basic's of adding the lightbox effect from a Thumbnail image to Large.

Note - The Lightbox script will need to be installed into your EC Toolset Template before the Lightbox effect works. Please contact us for us to add that for you...

Step One: You will need at least one image for the gallery to work effectively; A thumbnail image or Text and a Larger image.

Step Two: Upload images via the EC Toolset and then insert the thumbnail into the page.

Step Three: Reopen the image upload and view the large image; grab the URL/Address to that image(will be simular to "yourdomain.co.nz/myimages/IMAGENAME.jpg")

Now use the URL to Hyperlink the Thumbnail image to the Large. Don't worry about changing the "Target" or adding a "Title".

You will now notice the image has a border around it; simply open "Edit Image Specification" and click ok(you shouldn't need to enter any information).

Step Four: Now you need to open "View/Edit Source" and edit the a href="url to image" tag: by adding in rel="lightbox" and title="A COMMENT FOR THE IMAGE". Click here for an example of the code!

The a tag should now look like a rel="lightbox" title="A COMMENT FOR THE IMAGE" href="url to image" - Once your happy with the comment, click OK.

Finish: Simply Save & Publish the page to view your latest website addition! : )