Here's a very simple way of replacing the Product Image with a small icon that expands / contracts when clicked.
Go to Design / Library Layouts / Product Image. Right-click Standard Product Image and choose Copy. Rename that copy to be Expanding Product Image. Open Expanding Product Image and replace all code there with the following:
OK out.
Now, in your Product Details / Layout / Product / Product Image Layout; select Expanding Product Image and that's that.
You can set your entire site to use this by going to Setting / Site Options / Layout / Product / Product Image Layout and selecting Expanding Product Image.
The browser will resize the product image down so the icon will be somewhat rough. As the icons are really the main image (scaled in the browser) they'll still add to the page load time.
You can change the icon width by altering the 3 occurrences of 50 in the code above.
Go to Design / Library Layouts / Product Image. Right-click Standard Product Image and choose Copy. Rename that copy to be Expanding Product Image. Open Expanding Product Image and replace all code there with the following:
Code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<img src="<actinic:variable name="ProductImageFileName" />"
border="0"
width="50"
style="cursor:pointer"
onclick="if(this.width == 50){this.width=<actinic:variable name="ProductImageWidth" />;}else{this.width=50;}"
alt="<actinic:variable name="ProductName" encoding="strip"/> - Click to change size" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img src="<actinic:variable name="DefaultProductImage" />"
border="0"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
</a>
</actinic:block>
Now, in your Product Details / Layout / Product / Product Image Layout; select Expanding Product Image and that's that.
You can set your entire site to use this by going to Setting / Site Options / Layout / Product / Product Image Layout and selecting Expanding Product Image.
The browser will resize the product image down so the icon will be somewhat rough. As the icons are really the main image (scaled in the browser) they'll still add to the page load time.
You can change the icon width by altering the 3 occurrences of 50 in the code above.
Comment