Smilehouse Workspace HOWTO Articles

Howto open large product picture in a popup window

This is a useful feature when e.g. all necessary product data is displayed on the product list and the product page is not necessary to use. Also this is very applicaple when the large product picture does not fit into the Product page layout.

Modifying the Page List WAE

The popup window is generated for each product by adding a special Javascript into the Product List WAE.
Go to Visual -> WWW-outlook -> Page construction -> Product List

And click Product List WAE on the left.

Add this code to the Product HTML:

function pop$product_itemcode$()
generator.document.write('<html><head><title> $product_name$ </title></head>');
generator.document.write('<body bgcolor="#ffffff" marginheight="0" marginwidth="0"><center>');
generator.document.write('<font size="1" face="Verdana, Arial">');
generator.document.write(' $product_picture2$ ');
generator.document.write('<br><font size="2"><b>$product_name$</b></font><br><br>');
generator.document.write('<a href="javascript:close()">Close window</a></font></center></html>');

To customize the contents of the popup-window, you may modify the HTML-code inside the <script>-tag.
All Product list variables will are applicable.

In the example below, the thumbnail picture (small picture) is set in the Picture1-field, and the large picture in the Picture2-field in product data. Change these if necessary.

Find and replace in Product HTML the variable for product picture (usually $product_picture1$ with the following code:

<a href="javascript:pop$product_itemcode$();">$product_picture1$</a>

This generates a link from the small picture to the popup with bigger picture (picture 2).

Find and replace in Product HTML $product_name$ variable with the following code:

<a href="javascript:pop$product_itemcode$();">$product_name$</a>

This generates a link from the product name to the popup.

To add a text link to open the popup-window, add the following code to where you want the link to be:

<a href="javascript:pop$product_itemcode$();"><b>View large picture</b></a>

You might want to change the text View large picture to e.g. a picture with magnifier or similar.


When testing the script, the result should be something like this:

<< Back to HOWTO index