ShopSite Forums

Is there a simple solution to make the [-- MoreInfoImageRow --] clickable to switch images only, instead of causing a popup on click?

Since the template tag [-- MoreInfoImageRow --] outputs all of the code to do the image onmouseover and onclick there is not a simple way to change the functionality. It might be possible to use some javascript to rewrite the code on the fly to change the functionality of the onclick but you would probably need to know javascript really well to do it.

Another option would be to replace the tag itself with the a modified version of the code output by the tag. For example

Code: Select all

 [-- MoreInfoImageRow --]

would be replaced by something like

Code: Select all

<table cellpadding="0" cellspacing="0" id="product_info">
<tr>
      <td class="moreinfo_img"><div class="prod_img" style="overflow: auto; width: 360px; height: 320px;"><img src="http://Domain.com/media/sample-185x200.gif" alt="sample-185x200.gif" name="prod_img" ></div>
<div class="row_img"><table class="small_img"><tr><td class="small_img">
<a href="http:#"  onmouseover="document.prod_img.src='http://Domain.com/media/sample-185x200.gif';"  onClick="window.open('http://Domain.com/media/sample-185x200.gif', 'image_window',  'width=1px,height=1px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://Domain.com/media/ss_size3/sample-185x200.gif" alt="sample-185x200.gif" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://Domain.com/media/sale-tag-red.gif';"  onClick="window.open('http://Domain.com/media/sale-tag-red.gif', 'image_window',  'width=1px,height=1px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://Domain.com/media/ss_size3/sale-tag-red.gif" alt="sale-tag-red.gif" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://Domain.com/media/add_to_cart.gif';"  onClick="window.open('http://Domain.com/media/add_to_cart.gif', 'image_window',  'width=1px,height=1px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://Domain.com/media/ss_size3/add_to_cart.gif" alt="add_to_cart.gif" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http:///media/bargain-tag-red.gif';"  onClick="window.open('http://Domain.com/media/bargain-tag-red.gif', 'image_window',  'width=1px,height=1px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://Domain.com/media/ss_size3/bargain-tag-red.gif" alt="bargain-tag-red.gif" border=0> </a>
</td>
</tr></table>

That is the code for the moreinfo image and just 3 extra moreinfo images.

You could create that in template code but it is complicated to do because you have to check each extra moreinfo image field and see if it has an image in it using [-- IF PRODUCT.MoreInfoImageX --]. If it does have an image then you can use the tag [-- image PRODUCT.MoreInfoImageX --] where X can be a number from 1 to 20. So you have to have 20 [-- IF PRODUCT.MoreInfoImageX --] statements each followed by all the tags to output the url to the image in each place it is used and all the associated html and onmouseover, onclick etc. code. Because the tag [-- image <some image field> --] tag can not get the complete path to the resized image it can only be used if main image is directly in the /media directory of the store If the image is not in the media directory you will not beable to create the url to the resized image which is necessary to show the small images.

So although it could be done without using the [-- MoreInfoImageRow --] tag it is not a trivial task to implement.