Announcement

Collapse
No announcement yet.

How do I create a product image that can change size on the page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How do I create a product image that can change size on the page

    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' and expand the 'Product Image' group.

    Right-click on '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:

    <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>

    Click 'OK'

    Now, in your 'Product Image Layout' field (in the 'Layout' tab of your products' select 'Expanding Product Image' and the new layout will be used.

    You can set your entire site to use this by going to 'Settings | Site Options | Layout' and change the 'Product Image Layout' setting there.

    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.

    Many thanks to Norman Rouxel (http://www.drillpine.biz/) for providing this neat trick.
    Disclaimer: This code was provided by an SellerDeck user via the SellerDeck Community (http://community.sellerdeck.com/) and so can't be supported by the SellerDeck Technical Support team.
Working...
X