[-- VAR.AdditionalImages "0" --][-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --][-- VAR.AdditionalImages INC --][-- END_IF --][-- END_FOR --]
<style type="text/css">img#cj-miimage {background: #FFFFFF; max-width: 100%}div#cj-zoomcontain {margin-bottom: 0px auto 50px auto; text-align: center}.zoomPad {cursor: crosshair;position:relative;display:inline-block}.zoomPreload {display: none}.zoomPup {overflow:hidden; background-color: #FFF; -moz-opacity:0.6; opacity: 0.6; filter: alpha(opacity = 60); z-index:120; position:absolute; border:1px solid #FFF; z-index:101; cursor:crosshair}.zoomOverlay {position:absolute; left:0px; top:0px; background:#FFF; z-index:1000; width:100%; height:100%; display:none; z-index:101}.zoomWindow {position:absolute; left:110%; top:40px; background:#FFF; z-index:2000; height:auto; z-index:3000; z-index:110;box-shadow:0px 0px 10px rgba(0,0,0,0.1);-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1);-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.1)}.zoomWrapper {position:relative; z-index:110}.zoomWrapperImage {display:block; position:relative; overflow:hidden; z-index:110}.zoomWrapperImage img {border:0px; display:block; position:absolute; z-index:101; max-width: none}.zoomIframe{z-index: -1; filter:alpha(opacity=0); -moz-opacity: 0.80; opacity: 0.80; position:absolute; display:block}div#carouselMoreInfo .carousel-item a, div#prod_img a {display: block;text-align: center;width: 100%}div#carouselMoreInfo .carousel-item img, div#prod_img img {margin:0px auto;max-width:100%}div#carouselMoreInfo .carousel-indicators {position:relative;bottom:0px;margin-top:15px}div#carouselMoreInfo .carousel-indicators li {background-color:#[-- STORE.Color4 --]}div#carouselMoreInfo .carousel-indicators li.active {background-color:#[-- STORE.LinkColor --]}@media screen and (max-width:768px) {body.circle div#carouselMoreInfo .carousel-indicators li,body.rounded div#carouselMoreInfo .carousel-indicators li {height:12px;max-width:12px;border-radius:50%}div#cj-zoomcontain {display: none !important}}@media screen and (min-width:768px){div#carouselMoreInfo.miZoom .carousel-inner,div#carouselMoreInfo.miZoom .carousel-control-prev,div#carouselMoreInfo.miZoom .carousel-control-next {display:none !important}div#carouselMoreInfo .carousel-indicators li {height:60px;max-width:60px;text-indent:0px;border:1px solid transparent;background-color:transparent !important}body.bordersthick div#carouselMoreInfo .carousel-indicators li {border:2px solid transparent}div#carouselMoreInfo .carousel-indicators li.active {border:1px solid #[-- STORE.Color4 --]}body.bordersthick div#carouselMoreInfo .carousel-indicators li.active {border:2px solid #[-- STORE.Color4 --]}div#carouselMoreInfo .carousel-indicators span {display: block;height: 100%;background-color:#FFF;background-position: center;background-size: contain;background-repeat: no-repeat}}@media screen and (max-width: 988px) {.zoomPreload, .zoomPup, .zoomOverlay, .zoomWindow, .zoomWrapper, .zoomWrapperTitle, .zoomWrapperImage, .zoomIframe{display: none !important}}</style>
[-- IF PRODUCT.MoreInformationGraphic --]
[-- IF STORE.ImageZoom --][-- VAR.ThumbSize STORE.ImageZoomThumbSize --][-- VAR.RegSize STORE.ImageZoomZoomSize --][-- VAR.LargeSize STORE.ImageZoomZoomSize --]
<div class="clearfix" id="cj-zoomcontain"><div class="clearfix" id="cj-mizoom"><a id="prod_img" href="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]" class="jqzoom" rel="gal1" title="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"><img id="cj-miimage" src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]" title="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" name="prod_img"></a></div></div>
<div class="hidden"><a id="prod_img_main" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]',largeimage:'[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]'}"><img name="prod_img_main1" src="[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.ThumbSize] URL_ONLY --]" alt="[-- PRODUCT.MoreInformationGraphicDesc --]"></a></div>
[-- IF VAR.AdditionalImages NE 0 --]<div id="carouselMoreInfo" class="miZoom carousel slide" data-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active"><a href="#" onclick="return miGPop('[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]')" rel="{gallery: 'gal1', smallimage: '[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]',largeimage:'[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]'}">[-- PRODUCT.MoreInformationGraphic ONLY_ALT_TAG --]</a></div>
[-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --]<div class="carousel-item"><a href="#" onclick="return miGPop('[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.LargeSize] URL_ONLY --]')">[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.LargeSize] ONLY_ALT_TAG --]</a></div>[-- END_IF --][-- END_FOR --]
  </div>
  <a class="carousel-control-prev" href="#carouselMoreInfo" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Prev</span></a>
  <a class="carousel-control-next" href="#carouselMoreInfo" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
  <ol class="carousel-indicators">[-- VAR.IndicatorCount 0 --]
    <li data-target="#carouselMoreInfo" data-slide-to="[-- VAR.IndicatorCount --][-- VAR.IndicatorCount INC --]" class="active"><a href="javascript:void(0)" rel="{gallery: 'gal1', smallimage: '[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.RegSize] URL_ONLY --]',largeimage:'[-- PRODUCT.MoreInformationGraphic SS_SIZE[VAR.LargeSize] URL_ONLY --]'}"><span style="background-image:url([-- PRODUCT.MoreInformationGraphic URL_ONLY --])"></span></a></li>
[-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --]<li data-target="#carouselMoreInfo" data-slide-to="[-- VAR.IndicatorCount --][-- VAR.IndicatorCount INC --]"><a href="javascript:void(0)" rel="{gallery: 'gal1', smallimage: '[-- Product.MoreInfoImage[VAR.I] SS_SIZE[VAR.RegSize] URL_ONLY --]',largeimage:'[-- Product.MoreInfoImage[VAR.I] SS_SIZE[VAR.LargeSize] URL_ONLY --]'}"><span style="background-image:url([-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE[VAR.ThumbSize] URL_ONLY --])"></span></a></li>[-- END_IF --][-- END_FOR --]
  </ol>
</div>
[-- END_IF --]<!-- additional images -->
#####
[-- ELSE_IF VAR.AdditionalImages NE 0 --]<div id="carouselMoreInfo" class="carousel slide" data-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active"><a id="carousel-main" href="#" onclick="return miGPop('[-- PRODUCT.MoreInformationGraphic SS_SIZE0 URL_ONLY --]')"><img src="[-- PRODUCT.MoreInformationGraphic URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" name="prod_img"></a></div>
[-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --]<div class="carousel-item"><a href="#" onclick="return miGPop('[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE0 URL_ONLY --]')">[-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE0 ONLY_ALT_TAG --]</a></div>[-- END_IF --][-- END_FOR --]
  </div>
  <a class="carousel-control-prev" href="#carouselMoreInfo" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Prev</span></a>
  <a class="carousel-control-next" href="#carouselMoreInfo" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
  <ol class="carousel-indicators">[-- VAR.IndicatorCount 0 --]
    <li data-target="#carouselMoreInfo" data-slide-to="[-- VAR.IndicatorCount --][-- VAR.IndicatorCount INC --]" class="active" id="prod-img-main"><span style="background-image:url([-- PRODUCT.MoreInformationGraphic URL_ONLY --])"></span></li>
[-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --]<li data-target="#carouselMoreInfo" data-slide-to="[-- VAR.IndicatorCount --][-- VAR.IndicatorCount INC --]"><span style="background-image:url([-- PRODUCT.MoreInfoImage[VAR.I] SS_SIZE3 URL_ONLY --])"></span></li>[-- END_IF --][-- END_FOR --]
  </ol>
</div>
#####
[-- ELSE --]
<div id="prod_img"><a href="#" onclick="return miGPop('[-- PRODUCT.MoreInformationGraphic SS_SIZE0 URL_ONLY --]')"><img src="[-- PRODUCT.MoreInformationGraphic URL_ONLY --]" alt="[-- IF PRODUCT.MoreInformationGraphicDesc --][-- PRODUCT.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" name="prod_img"></a></div>
[-- END_IF --]<!-- store.zoom -->
#
[-- ELSE_IF PRODUCT.Graphic --]
##########################
<div id="prod_img"><a href="#" onclick="return miGPop('[-- PRODUCT.Graphic SS_SIZE0 URL_ONLY --]')"><img src="[-- PRODUCT.Graphic URL_ONLY --]" [-- IF PRODUCT.GraphicDesc --]alt="[-- PRODUCT.GraphicDesc --]"[-- ELSE --]alt="[-- PRODUCT.Name REMOVE_HTML --]"[-- END_IF --] name="prod_img"></a></div>
[-- END_IF --]