Lightbox and Zoom Image Tutorial for ShopSite
This topic contains 0 replies, has 1 voice, and was last updated by Anonymous 12 years, 11 months ago.
-
AuthorPosts
-
September 27, 2011 at 6:47 pm #48800
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.
-
AuthorPosts
You must be logged in to reply to this topic.