Online Shopping Cart Software
Talk to a sales representative 1-800-506-0398
 

Multiple images (swatch)

If you have several images of the same product (from different angles or in different colors), the cart can display these.
Edit your /content/skins/flat/product_style$.html file, where $ is equivalent the product style you are using (1,2,or 3)  and review the code below.
Example code:

<a href="{$product.image}" width="{$product.image_width}" height={$product.image_height} class="MagicZoom" id="zoom1" ><img src="{$product.preview}" style="border:0px;padding:0px;margin:0px 0px 0px 0px;" alt="{$product.title|htmlspecialchars}" title="{$product.title|htmlspecialchars}"/></a><br>

<!-- Define the other images using the id in the rel attribute -->

<p>Click to change image color:</p>
<a href="img-BK-big.jpg" rel="zoom1" rev="img-BK-small.jpg"><img src="color_BK.gif"/></a>
<a href="img-PR-big.jpg" rel="zoom1" rev="img-PR-small.jpg"><img src="color_PR.gif"/></a>
<a href="img-RB-big.jpg" rel="zoom1" rev="img-RB-small.jpg"><img src="color_RB.gif"/></a>
<a href="img-RD-big.jpg" rel="zoom1" rev="img-RD-small.jpg"><img src="color_RD.gif"/></a>



Step-by-step:

Add a unique id to the main <a> to identify the image you are referencing.
 Add your selectors using <a> links.
 Set rel and rev attributes to each selector:
          * rel should reference the zoom id.
          * rev should point to the new small image for the zoom.
          * href should point to the new big image of the zoom.

Changing selection behaviour

Instead of clicking the thumbnail to change image, you can set it to change upon mouse hover. Use the thumb-change property of the rel attribute for the main <a> tag. Two values are available to use: click (default) and mouseover.

Example code:

<!-- Firstly, define the main image, but notice the addition of the id and rel attributes -->
<a href="{$product.image}" width="{$product.image_width}" height={$product.image_height} class="MagicZoom" id="zoom1" rel="thumb-change: mouseover"><img src="{$product.preview}" style="border:0px;padding:0px;margin:0px 0px 0px 0px;" alt="{$product.title|htmlspecialchars}" title="{$product.title|htmlspecialchars}"/></a><br>

<!-- Secondly, define the other images using the id in the rel attribute -->
<p>Mouseover to change img color:</p>
<a href="img-BK-big.jpg" rel="zoom1" rev="img-BK-small.jpg"><img src="color_BK.gif"/></a>
<a href="img-PR-big.jpg" rel="zoom1" rev="img-PR-small.jpg"><img src="color_PR.gif"/></a>
<a href="img-RB-big.jpg" rel="zoom1" rev="img-RB-small.jpg"><img src="color_RB.gif"/></a>
<a href="img-RD-big.jpg" rel="zoom1" rev="img-RD-small.jpg"><img src="color_RD.gif"/></a>




User Opinions (0 votes)

No users have voted.

How would you rate this answer?



Thank you for rating this answer.

Related Articles

Attachments

No attachments were found.