[-- VAR.AdditionalImages "0" --][-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --][-- VAR.AdditionalImages INC --][-- END_IF --][-- END_FOR --]
[-- VAR.ThumbSize STORE.ImageZoomThumbSize --][-- VAR.RegSize STORE.ImageZoomProductSize --][-- VAR.LargeSize STORE.ImageZoomZoomSize --]
#
[-- IF Store.ImageZoom --]
[-- VAR.NumberPerRow 1 --][-- VAR.MaxNumberPerRow Store.ImageRowCnt --]
<style type="text/css">.clear{clear:both}.hidden{display:none!important}.thumb-cards{display:-ms-flexbox !important;display: flex !important;}.flex2>div{max-width:50%}.flex3>div{max-width:33%}.flex4>div{max-width:25%}.flex5>div{max-width:20%}.flex6>div{max-width:16%}.flex7>div{max-width:14%}.flex8>div{max-width:12.5%}.flex9>div{max-width:11%}.flex10>div{max-width:10%}.prod_img,.row_img,#prod_img,.row_img img{max-width:100%}.row_img{margin-top:6px;clear:left}.row_img a{display:inline-block;margin-top:2px;margin-right:2px}.row_img .thumb-cards>div:last-child a{margin-right:0px !important}#gallery img{border:1px solid transparent;;opacity:.7;filter:opacity(70)}a.zoomGalleryActive img{border:1px solid #[-- STORE.LinkColor --] !important;opacity:1!important;filter:opacity(100)!important}</style>
<div class="prod_img"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" name="prod_img" id="prod_img" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"></div>
<div class="row_img" id="gallery"><div class="thumb-cards flex[-- Store.ImageRowCnt --]">
[-- IF VAR.AdditionalImages GT 0 --]<div><a href="#" id="prod_img_main1" class="hidden" data-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a><a href="#" id="prod_img_main" class="hidden" data-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a><a href="#" class="zoomGalleryActive" data-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a></div>
[-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --][-- IF VAR.NumberPerRow VAR.MaxNumberPerRow --][-- VAR.NumberPerRow 0 --]</div><div class="clear"></div><div class="thumb-cards flex[-- Store.ImageRowCnt --]">[-- END_IF --][-- VAR.NumberPerRow INC --]<div><a href="#" data-image="[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInfoImageDesc[VAR.I] --][-- PRODUCT.MoreInfoImageDesc[VAR.I] --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --] [-- VAR.I --][-- END_IF --]"></a></div>[-- END_IF --][-- END_FOR --]
[-- ELSE_IF PRODUCT.OptionFiniteText --][-- IF PRODUCT.UseNewOption --]<div><a href="#" id="prod_img_main1" class="hidden" data-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a><a href="#" id="prod_img_main" class="hidden" data-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a><a href="#" class="zoomGalleryActive" data-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" data-zoom-image="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a></div>[-- END_IF --]
[-- END_IF --]</div></div>
<script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>
<script src="[-- OUTPUT_DIRECTORY_URL --]/publish/elevatezoom.js"></script>
# Use this script for a Lens Zoom
#<script>ss_jQuery("#prod_img").elevateZoom({gallery:'gallery',zoomType:"lens",lensShape:"round",lensSize:200,containLensZoom:true});</script>[-- END_IF --]
# Use this script for an inner zoom
<script>[-- IF PRODUCT.UseNewOption --]function changeMIimage(image,s_image,t_image){var x=ss_jQuery("img[src='"+t_image+"']:visible");if(x.length((x=ss_jQuery("img[src='"+t_image+"']")).length)){x.parent().click()}else{$('a.zoomGalleryActive').removeClass('zoomGalleryActive');document.prod_img.src=s_image;document.prod_img.dataset.zoomImage=image;$('div.zoomWindow').css('background-image','url("'+image+'")');}}[-- IF PRODUCT.UseMultiMenus --]function ss_multichangeimage(ss){if(ss.selectedIndex!=0){var image,i;if(document.prod_img!=undefined){i=ss.options.selectedIndex;image=image[-- Product.RecordNumber --][i];if((image!="")&&(image!='none')){changeMIimage(image,s_image[-- Product.RecordNumber --][i],t_image[-- Product.RecordNumber --][i]);}}}return false;}[-- END_IF --]ss_jQuery(function(){!(function(m,s,t,e){if(e)for(var p=ss_jQuery(e),i=0;i<m.length;i++){if(ss_jQuery('a[data-zoom-image="'+m[i]+'"]',p).length==0){var a=document.createElement('a'),img=document.createElement('img');a.className='hidden';a.dataset['image']=s[i];a.dataset['zoomImage']=m[i];img.src=t[i];a.appendChild(img);p.append(a)}}})(image[-- Product.RecordNumber --],s_image[-- Product.RecordNumber --],t_image[-- Product.RecordNumber --],document.getElementById('gallery'));ss_jQuery("#prod_img").elevateZoom({gallery:'gallery',zoomType:"inner",cursor:"crosshair"});});[-- ELSE --]ss_jQuery("#prod_img").elevateZoom({gallery:'gallery',zoomType:"inner",cursor:"crosshair"});[-- END_IF --]</script>
##### Else No Zoom
[-- ELSE --][-- VAR.NumberPerRow 1 --][-- VAR.MaxNumberPerRow Store.ImageRowCnt --]
<style type="text/css">.clear{clear:both}.prod_img,.row_img,#prod_img,.row_img img{max-width:100%}.thumb-cards{display:-ms-flexbox !important;display: flex !important;}.flex2>div{max-width:50%}.flex3>div{max-width:33%}.flex4>div{max-width:25%}.flex5>div{max-width:20%}.flex6>div{max-width:16%}.flex7>div{max-width:14%}.flex8>div{max-width:12.5%}.flex9>div{max-width:11%}.flex10>div{max-width:10%}.row_img a{display:inline-block;margin-top:2px;margin-right:2px}.row_img .thumb-cards>div:last-child a{margin-right:0px !important}</style>
<div class="prod_img" align="center"><img src="[-- PRODUCT.MoreInformationGraphic URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" name="prod_img" id="prod_img"></div>
[-- IF VAR.AdditionalImages GT 0 --]<div class="row_img" align="center"><div class="thumb-cards flex[-- Store.ImageRowCnt --]"><div><a href="#" onmouseover="document.prod_img.src='[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]';"  onClick="window.open('[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"></a></div>
[-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --][-- IF VAR.NumberPerRow VAR.MaxNumberPerRow --][-- VAR.NumberPerRow 0 --]</div><div class="clear"></div><div class="thumb-cards flex[-- Store.ImageRowCnt --]">[-- END_IF --][-- VAR.NumberPerRow INC --]<div><a href="#" onmouseover="document.prod_img.src='[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.RegSize] URL_ONLY --]';"  onClick="window.open('[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.LargeSize] URL_ONLY --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- IF PRODUCT.MoreInfoImageDesc[VAR.I] --][-- PRODUCT.MoreInfoImageDesc[VAR.I] --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --] [-- VAR.I --][-- END_IF --]"></a></div>[-- END_IF --][-- END_FOR --]
</div></div>[-- END_IF --]
[-- END_IF --]