Make the more info page a popup image

[curo]

Hi,

First, sorry for my poor english speaking.
Here is my problem :
I've a list of products on my website and I'd like them to pop up in a new window when the small image is clicked (just the image).
I can't find any option in the "more info pages" preference for this.
Thanks in advance for help.

[ShopSite Lauren]

You would need to create a custom product template in order to have the image a clickable pop up image. Below is how you would set this up:

1. This example uses JavaScript, so you would need to first add the following JavaScript to the head of this page (or your template).

<script language="javascript">
<!--
function showPicture(picNum) {
wHeight = 400;
wWidth = 400;
win = this.open(picNum, "picWin", "toolbar=no,menubar=yes,location=no,scrollbars=no,resizable=yes,width=" + wWidth + ",height=" + wHeight + ",screenX=0,screenY=0,left=0,top=0");
}
//-->
</script>

2. Now, you can add the hyperlink around your image. You would need to find where your product image is on your page, or where your product image tag is in your template. Once you have found the image, you can add the hyperlink HTML around it:

<a href="javascript:showPicture('')">[-- PRODUCT.Graphic --]</a>

3. Next you need to add the URL for the image you would like to appear in the pop-up. If you would like the more information page graphic to appear in the pop up, you can include the tag for that image within the JavaScript link.

<a href="javascript:showPicture('[-- IMAGE Product.MoreInformationGraphic --]')">[-- PRODUCT.Graphic --]</a>

Complete Template
Below is a complete product template with the product graphic pop up image included.

#########################
[-- DEFINE SUBPRODUCT --]
#########################

<b>[-- PRODUCT.Name --]</b>

[-- PRODUCT.Price --]

<a href="[-- PRODUCT.AddToCartURL --]">Add to Cart</a>

#############################
[-- END_DEFINE SUBPRODUCT --]
#############################





######################
[-- DEFINE PRODUCT --]
######################
<script language="javascript">
<!--
function showPicture(picNum) {
wHeight = 400;
wWidth = 400;
win = this.open(picNum, "picWin", "toolbar=no,menubar=yes,location=no,scrollbars=no,resizable=yes,width=" + wWidth + ",height=" + wHeight + ",screenX=0,screenY=0,left=0,top=0");
}
//-->
</script>

<!--------------Product Graphic------->
[-- IF Product.MoreInformationGraphic --]
<a href="[-- IMAGE Product.MoreInformationGraphic --]">[-- PRODUCT.Graphic --]</a>
[-- ELSE --]
[-- PRODUCT.Graphic --]
[-- END_IF --]

<!-------Product Name------->
[-- PRODUCT.NameSize Begin --][-- PRODUCT.NameStyle Begin --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- PRODUCT.Name --]
[-- ELSE --]
[-- PRODUCT.Name --]
[-- END_IF --]
[-- PRODUCT.NameStyle End --][-- PRODUCT.NameSize End --]

<!-------Product SKU------->
[-- PRODUCT.SKUSize Begin --][-- PRODUCT.SKUStyle Begin --]
[-- PRODUCT.SKU --]
[-- PRODUCT.SKUStyle End --][-- PRODUCT.SKUSize End --]

<!-------Product Description------->
<br>
[-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.DescriptionStyle Begin --]
[-- PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionStyle End --][-- PRODUCT.DescriptionSize End --]

<!-------Product Subproducts------->
[-- IF PRODUCT.Subproduct --]
[-- LOOP SUBPRODUCTS --]
<br>[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]
[-- ELSE --]

<!-------Product Price------->
<br>[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]

<!-------Product Add To Cart------->
[-- PRODUCT.OrderCheckout --]

[-- END_IF --]

##########################
[-- END_DEFINE PRODUCT --]
##########################

-Lauren

[curo]

Thank you for help Lauren ,
I'm going to work on it this week end

Edit : I was just wondering, it would be very cool if the shopsite generator let us the choice to popup the more info page in a new one or in the same one.