You can view examples of each of these effects on the following demo store pages:

Lightbox Example:

http://shopsite-demo.lexiconn.com/lightbox_test.html

Zoom-Image Example:

http://shopsite-demo.lexiconn.com/zoom_image_test.html

We have provided the scripts you will need to make either of these work in a single zip file:

http://support.lexiconn.com/more_info_image.zip

1. Unzip and upload the contents of this file to your /www directory. If you need to upload the files to another directory on your site, you will need to adjust the path for each of the javascript and CSS includes.

2. Add the following code to theregion of your MoreInfo template (or put the code in a ShopSite include and call that include in the head region):

<link media="screen" rel="stylesheet" href="/more_info_image/colorbox.css" />
<link href="/more_info_image/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/more_info_image/jquery.js"></script>
<script src="/more_info_image/jquery.colorbox-min.js"></script>
<script type="text/JavaScript" src="/more_info_image/cloud-zoom.1.0.2.min.js"></script>

Replace the [-- PRODUCT.MoreInformationGraphic --] and [-- MoreInfoImageRow --] section of your MoreInfo template with the following code (or put the code in a ShopSite include and call that include in place of those tags):

 [-- VAR.MoreInfoImageType 'Lightbox' --] 
 #set to 'Lightbox' or to 'ZoomBox' 
 <script type="text/javascript"> 
     //override default javascript popup function 
     window.open = function(url, name, props) {} 
 
     var MoreInfoImage = { 
         image_source: '', 
         image_title: '', 
         image_extension: '', 
         image_id: '', 
         image_id_stem: 'more_info_image_', 
         tld_regex: /\.com|\.net|\.org|\.edu|\.biz|\.gov/, 
         img_extension_regex: /\.jpg$|\.jpeg$|\.png$|\.gif$/i, 
         
         zoom_config: { 
             zoom_suffix: '_zoom',  //suffix that your larger images will use, for example, image.jpg and image_zoom.jpg 
             image_class: 'cloud-zoom', 
             gallery_class: 'cloud-zoom-gallery', 
             preview_id: 'zoom1', 
             thumb_image_width: 125, 
             zoom_image_source: '', 
             options:{ 
                 zoomWidth: "auto", 
                 zoomHeight: "auto", 
                 position: "inside", 
                 adjustX: 0, 
                 adjustY: 0, 
                 tint: false, 
                 tintOpacity: 0.5, 
                 lensOpacity: 0.5, 
                 softFocus: false, 
                 smoothMove: 3, 
                 showTitle: true, 
                 titleOpacity: 0.5 
             } 
         }, 
         
         lightbox_config: { 
             default_lightbox_width: 500, 
             options:{ 
                 title: '', 
                 transition: "elastic", //`elastic`, `fade`, or `none` 
                 speed: 350, //transition speed in ms. 
                 initialWidth: 300, //initial width of the Lightbox Window 
                 initialHeight: 100, //initial height of the Lightbox Window 
                 width: false, //force a width of the Lightbox Window (outer width of the entire window) 
                 height: false, //force a height of the Lightbox Window (outer height of the entire window) 
                 innerWidth: false, //force a width of the Lightbox Window (inner width of the entire window) 
                 innerHeight: false, //force a height of the Lightbox Window (inner height of the entire window) 
                 maxWidth: false, //set a maximum width for the window 
                 maxHeight: false, //set a maximum height for the window 
                 scalePhotos: true, //whether to scale images if a maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined 
                 scrolling: true, //whether to generate scrolling content if the image size exceed the size of the window 
                 opacity: 0.85, //Opacity of the screen overlay (range: 0 to 1) 
                 loop: true, //whether to allow a next link back to the first image after the last image is reached 
                 slideshow: false, //whether to generate a slideshow 
                 slideshowSpeed: 2500, //transition speed for slideshows in ms. 
                 slideshowAuto: true, //whether the slideshow should automatically begin 
                 slideshowStart: "Start Slideshow", //Text for the Slideshow Start control 
                 slideshowStop: "Stop Slideshow",  //Text for the Slideshow Stop control 
                 previous: "Previous", //Text for the previous image button 
                 next: "Next", //Text for the next image button 
                 close: "Close", //Text to close the window 
                 top: false, //Controls vertical positioning of window 
                 bottom: false, //Controls vertical positioning of window 
                 left: false, //Controls horizontal positioning of window 
                 right: false, //Controls horizontal positioning of window 
                 fixed: false  //Sets a fixed position for the window 
             } 
         }, 
 
         genID: function(){ 
             var rand_id = Math.floor(Math.random()*400); 
             this.image_id = this.image_id_stem + rand_id; 
         }, 
         
         generateID: function(){ 
             this.genID(); 
             if(document.getElementById(this.image_id) != undefined){ 
                 this.genID(); 
             } 
         }, 
         
         parseSource: function(){ 
             var p_image = this.image_source.split(this.img_extension_regex); 
             var p_image = p_image_source.split(this.tld_regex); 
             var p_z_image = p_image_source.split(this.img_extension_regex); 
             this.image_extension = p_image_source.match(this.img_extension_regex); 
             this.zoom_config.zoom_image_source =  p_z_image[0] + this.zoom_config.zoom_suffix + this.image_extension; 
         }, 
         
         generateZoomBoxImage: function(src, title){ 
             this.image_source = src; 
             this.parseSource(); 
             this.generateID(); 
             var output = '<a href="' + this.zoom_config.zoom_image_source + '" class="'  + this.zoom_config.image_class + '" id="' + this.zoom_config.preview_id + '" rel="position: \'' + this.zoom_config.options.position + '\', showTitle: true, adjustX: 10, adjustY:-4\">[-- PRODUCT.MoreInformationGraphic JS_ENCODE --]</a>'; 
             return output; 
         }, 
         
         generateZoomThumb: function(src, title){ 
             this.image_source = src; 
             this.image_title = title; 
             this.parseSource(); 
             this.generateID(); 
             var output = '<a href="' + this.zoom_config.zoom_image_source + '" class="'  + this.zoom_config.gallery_class + '" id="' + this.image_id + '" title="' + this.image_title + '" rel="useZoom: \'' + this.zoom_config.preview_id + '\', smallImage: \'' + this.image_source + '\', zoomWidth: \'' + this.zoom_config.options.zoomWidth + '\', zoomHeight: \'' + this.zoom_config.options.zoomHeight + '\', position: \'' + this.zoom_config.options.position + '\', showTitle: \'' + this.zoom_config.options.showTitle + '\', adjustX: ' + this.zoom_config.options.adjustX + ', adjustY:' + this.zoom_config.options.adjustX + ', tint: ' + this.zoom_config.options.tint + ', tintOpacity: \''+ this.zoom_config.options.tintOpacity + '\', lensOpacity: \'' + this.zoom_config.options.lensOpacity + '\', softFocus: \'' + this.zoom_config.options.softFocus + '\', smoothMove: \'' + this.zoom_config.options.smoothMove + '\', titleOpacity: \'' + this.zoom_config.options.titleOpacity + '\'"><img src="' + this.image_source + '" width="' + this.zoom_config.thumb_image_width + '" title="' + this.image_title + '" /></a>'; 
             return output; 
         }, 
 
         generateLightbox: function(){ 
           $(document).ready(function(){ 
               
              $('td[class="small_img"] > a').each(function(e){ 
                   $(this).removeAttr("onmouseover"); 
              }); 
 
               $('td[class="small_img"] > a > img').each(function(i){ 
                     $(this).parent().attr("href", this.src.replace(/ss_size\d\//, "")); 
                     $(this).parent().attr("rel", "16"); 
                     this.image_title = $(this).attr("title") != undefined ? $(this).attr("title") : '[-- PRODUCT.Name --]'; 
                     MoreInfoImage.lightbox_config.options.title = this.image_title; 
                    $(this).parent().colorbox(MoreInfoImage.lightbox_config.options); 
               }); 
                 
               $('img[name="prod_img"]').click(function(){ 
                     var current_src = ($(this).attr("src")); 
                     $('td[class="small_img"] > a').each(function(i){ 
                          if($(this).attr("href") == current_src){ 
                               $(this).click(); 
                          } 
                     }); 
               }); 
       }); 
         } 
     }    
 
 </script> 
 [-- IF VAR.MoreInfoImageType 'ZoomBox' --] 
 <div class="zoom_image_block" style="width: 550px; height: 425px;"> 
     <div id="zoom_large_image" style="float: left; height: 425px;"> 
       <span id="more_info_graphic" style="display: none;">[-- PRODUCT.MoreInformationGraphic --]</span> 
       <script type="text/javascript"> 
         var p_image_source = $("#more_info_graphic > img").attr("src"); 
         var p_image_title = $("#more_info_graphic > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomBoxImage(p_image_source, p_image_title)); 
         </script> 
     </div> 
 <div id="zoom_image_row" class="scroll-pane" style="float: right; width: 225px; height: 425px; overflow: auto; border-right: 1px solid #ccc;"> 
 <table align="center" width="175" id="zoom_image_table"> 
 <tr> 
   <td> 
 <div class="preview_image" > 
       <span id="more_info_image_0" style="display: none;">[-- PRODUCT.MoreInformationGraphic --]</span> 
       <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_0 > img").attr("src"); 
         var p_image_title = $("#more_info_image_0 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
         </script> 
 </div> 
   </td> 
 </tr> 
 [-- IF PRODUCT.MoreInfoImage1 --]  
 <tr> 
   <td> 
 <div class="preview_image" > 
       <span id="more_info_image_1" style="display: none;">[-- PRODUCT.MoreInfoImage1 --]</span> 
       <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_1 > img").attr("src"); 
         var p_image_title = $("#more_info_image_1 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
         </script> 
 </div> 
   </td> 
 </tr> 
 [-- END_IF --] 
     
 [-- IF PRODUCT.MoreInfoImage2 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
    <span id="more_info_image_2" style="display: none;">[-- PRODUCT.MoreInfoImage2 --]</span> 
       <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_2 > img").attr("src"); 
         var p_image_title = $("#more_info_image_2 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
         </script> 
 </div> 
   </td> 
 </tr> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage3 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_3" style="display: none;">[-- PRODUCT.MoreInfoImage3 --]</span> 
       <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_3 > img").attr("src"); 
         var p_image_title = $("#more_info_image_3 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
         </script> 
 </div> 
   </td> 
 </tr> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage4 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_4" style="display: none;">[-- PRODUCT.MoreInfoImage4 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_4 > img").attr("src"); 
         var p_image_title = $("#more_info_image_4 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage5 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_5" style="display: none;">[-- PRODUCT.MoreInfoImage5 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_5 > img").attr("src"); 
         var p_image_title = $("#more_info_image_5 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage6 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_6" style="display: none;">[-- PRODUCT.MoreInfoImage6 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_6 > img").attr("src"); 
         var p_image_title = $("#more_info_image_6 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage7 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_7" style="display: none;">[-- PRODUCT.MoreInfoImage7 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_7 > img").attr("src"); 
         var p_image_title = $("#more_info_image_7 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage8 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_8" style="display: none;">[-- PRODUCT.MoreInfoImage8 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_8 > img").attr("src"); 
         var p_image_title = $("#more_info_image_8 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 </table> 
     </div> 
 </div> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage9 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_9" style="display: none;">[-- PRODUCT.MoreInfoImage9 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_9 > img").attr("src"); 
         var p_image_title = $("#more_info_image_9 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 </table> 
     </div> 
 </div> 
 [-- END_IF --] 
 [-- IF PRODUCT.MoreInfoImage10 --] 
 <tr> 
   <td> 
 <div class="preview_image"> 
     <span id="more_info_image_10" style="display: none;">[-- PRODUCT.MoreInfoImage10 --]</span> 
     <script type="text/javascript"> 
         var p_image_source = $("#more_info_image_10 > img").attr("src"); 
         var p_image_title = $("#more_info_image_10 > img").attr("title"); 
         document.write(MoreInfoImage.generateZoomThumb(p_image_source,  p_image_title)); 
     </script> 
 </div> 
 </td> 
 </tr> 
 </table> 
     </div> 
 </div> 
 [-- END_IF --] 
 [-- ELSE_IF VAR.MoreInfoImageType 'Lightbox' --] 
 <div class="zoom_image_block" style="width: 550px; height: 425px;"> 
 [-- MoreInfoImageRow --] 
 </div> 
 <script type="text/javascript"> 
    MoreInfoImage.generateLightbox(); 
 </script> 
 [-- END_IF --] 

3. Set the VAR.MoreInfoImageType variable to either ‘Lightbox’ or ‘ZoomBox’:

[-- VAR.MoreInfoImageType 'Lightbox' --]

or

[-- VAR.MoreInfoImageType 'ZoomBox' --]

4. Configure options for whichever effect you are using:

=======================================================
For Lightbox, the following options may be customized in the lightbox_config section of the script (a value of ‘false’ should be used if no value is set):

default_lightbox_width: width of the lightbox window (default = 500)
transition: elastic|fade|none (default = elastic)
speed: transition speed (default = 350ms)
initialWidth: initial width of the Lightbox Window [in pixels or percent] (default = 300px)
initialHeight: initial height of the Lightbox Window [in pixels or percent] (default = 100px)
width: force a width of the Lightbox Window using the outer width of the entire window [in pixels or percent] (default = false)
height: force a height of the Lightbox Window using the outer height of the entire window [in pixels or percent] (default = false)
innerWidth: force a width of the Lightbox Window using the inner width of the entire window [in pixels or percent] (default = false)
innerHeight: force a height of the Lightbox Window using the inner height of the entire window [in pixels or percent] (default = false)
maxWidth: set a maximum width for the window [in pixels or percent] (default = false)
maxHeight: set a maximum height for the window [in pixels or percent] (default = false)
scalePhotos: whether to scale images if a maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined [true|false] (default = true)
scrolling: whether to generate scrolling content if the image size exceed the size of the window [true|false] (default = true)
opacity: Opacity of the screen overlay [range: 0 to 1] (default = 0.85)
loop: whether to allow a `Next` link back to the first image after the last image is reached (default = true)
slideshow: whether to generate a slideshow [true|false] (default = false)
slideshowSpeed: transition speed for slideshows in ms. (default = 3500)
slideshowAuto: If slideshow is enabled, whether the slideshow should automatically begin [true|false] (default = false)
slideshowStart: Text for the Slideshow Start control (default = “Start Slideshow”)
slideshowStop: Text for the Slideshow Stop control (default = “Start Slideshow”)
previous: Text to display for the `Previous` image button (default = ‘Previous’)
next: Text to display for the `Next` image button (default = ‘Next’)
close: Text to display to close the window (default = ‘Close’)
top: Set top vertical positioning of window [in pixels] (default = false)
bottom: Set bottom vertical positioning of window [in pixels] (default = false)
left: Set left horizontal positioning of window [in pixels] (default = false)
right: Set right horizontal positioning of window [in pixels] (default = false)
fixed: Sets a fixed position for the window [true|false] (default = false)

=======================================================
For ZoomBox, you will need to create a large version of your products images and name them the same as the corresponding product image but with a particular suffix, for example, using the default suffix “_zoom”:

the large version of:

product_image.jpg

would be called

product_image_zoom.jpg

If you change this suffix to something other than the default of _zoom, you will need to update the zoom_suffix value zoom_config section of the script:

zoom_suffix: ‘_zoom’

to:

zoom_suffix: ‘_your_custom_suffix’

The following options may be customized in the zoom_config section of the script (a value of ‘false’ should be used if no value is set):

zoomWidth: width of the zoom window in pixels (default = “auto”)
zoomHeight: height of the zoom window in pixels (default = “auto”)
position: the position of the zoom window relative to the small image (default = “inside”)
adjustX: fine tune the x-position of the zoom window in pixels (default = 0)
adjustY: fine tune the y-position of the zoom window in pixels (default = 0)
tint: set a tint color to cover the small image. Colors should be specified in hex format, such as ‘#aa00aa’ (does not work with softFocus)
tintOpacity: opacity of the tint [range: 0 to 1] (default = 0.5)
lensOpacity: opacity of the mouse pointer lens [range: 0 to 1] (default = 0.5)
softFocus: set to true to apply a soft blur to the regions of the image outside of your mouse magnifier [true|false] (default = true)
smoothMove: smoothness of the zoom effect as you move your mouse lens over the image [1 = no smoothing, higher integers = more smoothing] (default = 3)
showTitle: show the title tag of the image (default = true)
titleOpacity: opacity of the title [range: 0 to 1] (default = 0.5)

5. After this code is in place in your template, be sure to regenerate (Utilities -> Publish -> Regenerate). This code supports up to 10 extra product images.