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.
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: http://www.yourdomain.com/product_pictures/small/
Large pics: http://www.yourdomain.com/product_pictures/large/
The packet includes 5 files:
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
Include the following code inside your framefree shop template's <HEAD>-tag.
<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
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="http://www.yourdomain.com/pictures/large/$product_itemcode$.jpg" rel="lightbox" title='$product_name$'>
Notice: You should change picture folder paths to where you have stored the pictures.
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