Displaying multiple views on a product

Displaying multiple views on a product in the moreinfo screen is rather easy: just show more images using the myshop-image:<n|column name> extension. But what if you wish the user to be able to view a bigger version of the image the same way as the default layout can? Then you could use the script below.

This script makes a few assumptions:

  • You have columns named img_small_<n> (replace <n> with the image followup number) in your excel sheet, containing the small images (just adjust the script using search and replace if you want to use a different name).
  • You have columns named img_large_<n> in the same fashion as #1.
  • You use complete urls for the pictures (including http:// etc etc)

The following code has to be inserted in the <head> of the document.

1 <script type="text/javascript">
3 function switch_image(new_url){
4 var img = document.getElementById('large_image');
5 img.src = new_url;
6 }
8 </script>
<script type="text/javascript">         

function switch_image(new_url){ 
var img = document.getElementById('large_image');       
img.src = new_url;      


This code will create the function needed to switch the images around. The following code should be placed within your myshop-block:product block to display the images and make them work the way we want to.

<td colspan="3">        
<img style="myshop-image:img_large_1;" id="large_image"/>       
<img style="myshop-image:img_small_1;cursor:pointer;" onClick="myshop-eval:switch_image('{img_large_1}');"/>    
<img style="myshop-image:img_small_2;cursor:pointer;" onClick="myshop-eval:switch_image('{img_large_2}');"/>    
<img style="myshop-image:img_small_3;cursor:pointer;" onClick="myshop-eval:switch_image('{img_large_3}');"/>    


Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment