Smilehouse Workspace HOWTO Articles

Howto open large product picture with a darkened background (LightBox)

This is a more advanced and stylish way to show a large product picture directly from a product list with a single click.

This is a useful feature especially if all necessary product data is displayed on the product list, and the product page is not neede or when the larger product picture does not fit into the product page.

Storing the product pictures on a web server

The script used here requires that all product pictures should be be strored in the same web directory and picture filenames should be named according to product itemcode. For example if your product number is LKT014, the picture name should be LKT014.jpg.

You should place small and large pictures into different folders, e.g.
Small pics:
Large pics:

Placing the Javascript and other files on server

Download the required javascript and image files:

The packet includes 5 files:
lightbox.js (this is the actual Javascript code, you can alter the script if needed)
lightbox.css (this file generates the style/outlook for the layer, you may alter it to your needs)
close.gif (this is the close-button used lightbox)
loading.gif (this image is shown when the large picture is loading)
overlay.png (the fade is done using this image file, so you might want to change e.g. the color of this image if needed)

Upload the files to your Workspace server using File Manager:
Visual -> Tools -> File Manager

Loading the Javascript and stylesheet

Include the following code inside your framefree shop template's <HEAD>-tag.

<script type="text/javascript" src="files/organization/html/lightbox.js"></script>
<link type="text/css" href="files/organization/html/lightbox.css" rel="stylesheet" media="screen">

Notice: you should change the organization name to match with your Workspace organization name (by default: organization).

The place for this can be found at:
Visual -> WWW-outlook -> Structure -> FrameFree

Creating the link

You should alter the HTML-code in Product List, which is found at:
Go to Visual -> WWW-outlook -> Page construction -> Product List

Click the Product List WAE on the left.

Add the following code to where you want the small product picture to be displayed in the Product list,
usually this is done by replacing the small product picture variable with the code.

<a href="$product_itemcode$.jpg" rel="lightbox" title='$product_name$'>
<img src="$product_itemcode$.jpg"></a>

Notice: You should change picture folder paths to where you have stored the pictures.

Testing the script

You should see a result similar to this:

And by pressing the image or close button or the background (dark area) the large picture fades away.

<< Back to HOWTO index