Lightbox and Zoom Image Tutorial for ShopSite

Forum Forums Tutorials Lightbox and Zoom Image Tutorial for ShopSite

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 7 years ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #48800

    Anonymous
    Participant

    If you would like to implement the Lightbox or the Image-Zoom effect on your MoreInfo pages with multiple MoreInfo images, the following script will make it much easier.

    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.