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"> |
| 2 | |
| 3 | function switch_image(new_url){ |
| 4 | var img = document.getElementById('large_image'); |
| 5 | img.src = new_url; |
| 6 | } |
| 7 | |
| 8 | </script> |
<script type="text/javascript">
function switch_image(new_url){
var img = document.getElementById('large_image');
img.src = new_url;
}
</script>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.
<table>
<tr>
<td colspan="3">
<img style="myshop-image:img_large_1;" id="large_image"/>
</td>
</tr>
<tr>
<td>
<img style="myshop-image:img_small_1;cursor:pointer;" onClick="myshop-eval:switch_image('{img_large_1}');"/>
</td>
<td>
<img style="myshop-image:img_small_2;cursor:pointer;" onClick="myshop-eval:switch_image('{img_large_2}');"/>
</td>
<td>
<img style="myshop-image:img_small_3;cursor:pointer;" onClick="myshop-eval:switch_image('{img_large_3}');"/>
</td>
</tr>
</table>
Post your comment on this topic.