Wosbee 1.10 NEW FEATURES!
HOWTO Open a large product picture in a new popup window
Created December 20th, 2007
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:
<script>
function pop$product_itemcode$()
{
var generator=window.open('','name','height=400,width=400');
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>');
generator.document.close();
}
</script>
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.
Notice: 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.
Testing
When testing the script, the result should be something like this:
- Add new comment
- 2782 reads
- Email this page
HOWTO Open a large product picture in a new popup window
hello
if we let the original article code definition in general product properties as " product-1" it doesn't work .......apparently it is necessary to change into "product1"
electronicworld
other thing .............YOUR WEBSITE IS MARVELLOUS CONGRATULATIONS AND THANKS TO YOU !!!!