ID #1073

Adding Photographs To Your Lightbox Image Viewer (Sitewizard Editor)

The Lightbox system is an excellent attachment for anyone who wishes to show a portfolio of images. By using animation, this system will open a large version of any thumbnail image clicked on whilst darkening the rest of your website, thus making sure that the viewer's focus is purely on the image. It also includes previous, next and close buttons to the image, as well as the ability to add a relevant caption of your choice.

If you are interested in the Lightbox system then please visit our website to view a working example, then contact your Customer Account Manager for a quote.

Editing images for use in your Lightbox system

Before you can add images into the system you'll need to adjust them so they are in the same dimensions as the rest of the pictures on your website. This will need to be done for both the small (thumbnail) and large image. We recommend that you use an image editor such as Adobe Photoshop, or for a cheaper alternative try Gimp (GNU Image Manipulation Program).


We recommend that your large images should be no more than 650 pixels wide or 440 pixels high. The size of the thumbnails used will vary depending on the characteristics of your website. Follow the instructions below to find out the specific dimensions to use.

Finding the size of the thumbnails on your site

  1. Visit your website and open the page that the contains your Lightbox image viewer.
  2. Right click your mouse over one of the thumbnails and select Properties.
  3. This will then bring up all the information about this image. Make a note of the Dimensions as you will need to make all your thumbnails this size.
  4. Click Cancel to close the window.

Adding images into your Lightbox system

Once you have resized your images to the correct dimensions you'll then need to upload them into the SiteWizard system before they can be used on your website. Instructions on how to do this can be found in the Image Store [link] section of this guide.

  1. Open the page you wish to add the thumbnail images too.
  2. Click on the page where you would like the image to appear.
  3. Click on the Insert/Edit Image button on the toolbar.
  4. In the pop-up menu that appears click on the Browse Server button which is to the right of the URL input box.
  5. This will open the Image Library in a new pop-up window.
  6. Find the image you would like to insert and click on its filename.
  7. This will now take you back to the original pop-up window. In the preview window, you'll now see the image you selected along with some sample text.
  8. Click Ok and the image will then be inserted on to the page.

Adding the lightbox viewer link

Now that the thumbnail image has been inserted you'll need to add a link to the larger image and a title tag, which will eventually be the images caption.

  1. Right click your mouse over the image and select Image Properties, then the Link tab.
  2. To link to the bigger image you need to click on the Browse Images button.
    It's always good practice to name the larger image of the two the same as the thumbnail but with the word 'large' or 'big' after it. e.g. For your first image the thumbnail would be named image1.jpg and the large image will be image1large.jpg.)
  3. In the "Display Target Image in a Lightbox:" Select either Lightbox (No Group) or Lightbox (A). You can add images to 3 different lightbox groups A,B and C.
  4. In the "Lightbox caption:" insert the title of the image and this will get displayed with the image.Image Properties Adding Lightbox
  5. Click Ok to add the lightbox function.

Tags: sitewizard editor

Related entries:

Last update: 2009-06-08 11:46
Author: SiteWizard Support
Revision: 1.4

{writeFacebookMsgTag} {writePrintMsgTag} {writeSend2FriendMsgTag} {writePDFTag}
Rate this FAQ

Average rating: 0 (0 Votes)

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry

SiteWizard : Lyndean House : 30-34 Albion Place : Maidstone : Kent : ME14 5DZ Tel No.08450 60 88 60 : Fax No.08450 60 88 61
© 1996- - SiteWizard is a Registered Trademark (Patent Pending)
Company Registration Number 03454062. Registered in England. VAT Number 683830804.