{if $defProductImage !=''}
{assign var="imageCount" value=$productImages|count+1}
{else}
{assign var="imageCount" value=$productImages|count}
{/if} 
{if $type|default:'' =='combination'}
<div class="img-slider slip mb-4"> 
    {include file="catalog/default/FreeGift.tpl"}
	{if $productImages|count>0}
		<img id="img_01" src="{$view_public_path}/uploads/catalog/product-combination/preview/{$productImages[0]['productImage']}" data-zoom-image="{$view_public_path}/uploads/catalog/product-combination/large/{$productImages[0]['productImage']}" class="img-fluid"/>
	{else}
		<img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}" class="img-fluid"/>
	{/if}
     <div class="py-2 d-block d-md-none"><span class="tap-img">{$language.lblDoubleTapimagetoZoom}</span></div>
     
    </div>
     {if $imageCount>1}


    <div class="thumb-view mt-3 mx-4">
         {if $productImages|count>3}
        <a href="javascript:void(0);" class="prev-slider icon-left-arrow arrow"></a>
        {/if}
			<div class="overview clearfix" id="slider1">
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
						<div class="thumb px-1">
							<a href="#" data-image="{$view_public_path}/uploads/catalog/product-combination/preview/{$image['productImage']}" data-zoom-image="{$view_public_path}/uploads/catalog/product-combination/large/{$image['productImage']}" {if $key ==0}class="border-secondary border p-1 d-block"{/if}>
								<img id="img_01" src="{$view_public_path}/uploads/catalog/product-combination/small/{$image['productImage']}" class="img-fluid" />
							</a>
						</div>
					{/foreach}
					{if $defProductImage !=''}
						<div class="thumb px-1">
							<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}" class="border p-1 d-block">
								<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}"   class="img-fluid"/>
							</a>
						</div>
					{/if}
				{else}
					<div class="thumb px-1">
						<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}" class="border p-1 d-block">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" class="img-fluid" />
						</a>
					</div>
				{/if}
			</div>
         {if $productImages|count>3}
        <a href="javascript:void(0);" class="next-slider icon-right arrow"></a>
        {/if}
    </div>
    {/if}
   
{else}
<div class="img-slider position-relative">
          {if $freeProductsCount>0}
                            <div class="free-gift"><i class="icon-gift"></i> <span class="hidden-xs">{$language.lblFreeGift}</span></div>
                        {/if}
	{if $defProductImage !=''}
		<img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}" class="img-fluid" />
	{else}
		<img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$productImages[0]['productImage']}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$productImages[0]['productImage']}" class="img-fluid" />
	{/if}
    <div class="py-2 d-block d-md-none">
    <span class="tap-img">{$language.lblDoubleTapimagetoZoom}</span>
    <a href="javascript:void(0);" class="close-img font-bold"> <span class="icon-cross-medium"></span></a>
    </div>
     
    </div>
     {if $imageCount>1}
     <div class="thumb-view mt-3 mx-4">
			<div class="overview clearfix" id="slider1">
				{if $defProductImage !=''}
					<div class="thumb px-1">
						<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}" class="border-secondary border d-block p-1">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" class="img-fluid"  />
						</a>
					</div>
				{/if}
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
						<div class="thumb px-1">
						<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$image['productImage']}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$image['productImage']}" class="border d-block p-1" >
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$image['productImage']}"  class="img-fluid" />
						</a>
					</div>
					{/foreach}
				{/if}
			</div>
    </div>
    {/if}
{/if}	
{include file='catalog/default/freeGiftProduct.tpl'}
	<script type="text/javascript">
	$(".zoomContainer").remove();
	{literal}
		$(document).ready(function(){
                $('#slider1').slick({
                infinite: false,
                dots: false,
	            speed: 700,
                 prevArrow: '<span class="slick-arrow  slick-prev icon-arrow-bold-left"></span>',
                 nextArrow: '<span class="slick-next slick-arrow icon-arrow-bold-right"></span>', 
		      	slidesToShow: 5,
				slidesToScroll: 5,
				responsive: [
				    {
				      breakpoint: 600,
				      settings: {
				        slidesToShow: 3,
				        slidesToScroll: 3
				      }
				    },
			  	]
            });  
                
	        
			if (window.matchMedia('(min-width: 992px)').matches){
				$("#img_01").bind("click", function(e){ 
					var ez =   $('#img_01').data('elevateZoom');	
					$.fancybox(ez.getGalleryList());
					return false;
				});                                
                                
                                if(direction=='rtl') {
                                    
                                    $("#img_01").elevateZoom({
                                  gallery:'slider1',
                                  cursor: 'pointer',
                                  easing : true,
                                  slidesToScroll: 5,    
                                  zoomWindowFadeIn: 500,
                                  zoomWindowFadeOut: 500,
                                  lensFadeIn: 500,
                                  lensFadeOut: 500, 
                                  zoomWindowWidth:500,
                                  zoomWindowHeight:500,
                                  zoomWindowPosition: 11, 
                                  zoomWindowOffetx: -20,
                                  borderSize: 1,    
                                  galleryActiveClass: 'border-secondary'

                              });  
                                } else {
                                    
                                    $("#img_01").elevateZoom({
                                  gallery:'slider1',
                                  cursor: 'pointer',
                                  easing : true,
                                  slidesToScroll: 4,    
                                  zoomWindowFadeIn: 500,
                                  zoomWindowFadeOut: 500,
                                  lensFadeIn: 500,
                                  lensFadeOut: 500, 
                                  zoomWindowWidth:500,
                                  zoomWindowHeight:500,
                                  zoomWindowPosition: 1, 
                                  zoomWindowOffetx:30,
                                  borderSize: 1,    
                                  galleryActiveClass: 'border-secondary'

                              });  
                                }

			}
            else if (window.matchMedia('(min-width: 768px)').matches){
                $("#img_01").bind("click", function(e){ 
					var ez =   $('#img_01').data('elevateZoom');	
					$.fancybox(ez.getGalleryList());
					return false;
				});                                
              $("#img_01").elevateZoom({
                          gallery:'slider1',
                      cursor: 'pointer',
                      easing : true,
                      zoomType: "inner",
                      galleryActiveClass: 'border-secondary'

                  });  
                               
            }
            else{
                $("#img_01").bind("click", function(e){ 
					var ez =   $('#img_01').data('elevateZoom');
				});
                $(".img-slider").doubletap(function() {
                    $(".pordSlider-inner").addClass("zoom-img");
                    $("body").css("overflow","hidden");
                    $("#img_01").elevateZoom({
                      gallery:'slider1',
                      cursor: 'pointer',
                      easing : true,
                      zoomType: "inner",
                      galleryActiveClass: 'border-secondary'
                    });  
                    $("#slider1 .icon-left-arrow ").trigger( "click" );
                    
                });
                $(".close-img").click(function() {
                    $(".pordSlider-inner").removeClass("zoom-img");
                    $(".zoomContainer").remove();
                    $("body").css("overflow","");
                    $("#slider1 .icon-left-arrow ").trigger( "click" );
                });
                $("#slider1 a").click(function() {
                    var link = $(this);
                    if( ! $(".pordSlider-inner").hasClass("zoom-img")){
                        $(".pordSlider-inner").addClass("zoom-img");
                        $("body").css("overflow","hidden");
                        $("#img_01").elevateZoom({
                          gallery:'slider1',
                          cursor: 'pointer',
                          easing : true,
                          zoomType: "inner",
                          galleryActiveClass: 'border-secondary'
                        });
                       
                        setTimeout(function() {
                            link.trigger( "click" );
                        }, 500);
                        
                    }
                });
            }
            
//            $(".thumb-view  .prev-slider").on( "click", function() {
//                $("#slider1 .icon-left-arrow ").trigger( "click" );
//            });
//            $(".thumb-view .next-slider").on( "click", function() {
//                $("#slider1 .icon-right ").trigger( "click" );
//            });
            
		});
	{/literal}	
	</script>

