{if $section|default:''=='quickView'}
		<script type="text/javascript">
		$(".zoomContainer").remove();
	{literal}
		$(document).ready(function(){
			//Examples
			$("#img_01").elevateZoom({gallery:'slider1', cursor: 'pointer', galleryActiveClass: 'active'});
		});
	{/literal}	
	</script>
{else}
	<script type="text/javascript">
	$(".zoomContainer").remove();
	{literal}
		$(document).ready(function(){
			//Examples
			$("#img_01").elevateZoom({gallery:'slider1', cursor: 'pointer', galleryActiveClass: 'active'});
			$("#img_01").bind("click", function(e) 
			{  
				var ez =   $('#img_01').data('elevateZoom');	
				$.fancybox(ez.getGalleryList());
				return false;
			});
		});
	{/literal}	
	</script>
{/if}
{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"> <div class="sliderInstruction text-center"> <span></span>{$language.lblRollOver}</div>
	{if $productImages|count>0}
		<img id="img_01" class="img-responsive" 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']}"/>
	{else}
		<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}"/>
	{/if}
     {if $imageCount>1}  
    <div class="thumb-view clearfix">
    {if $productImages|count>4}
    <a class="buttons prev1" href="Javascript:void(0);">left</a>{/if}
	<div id="slider1">
		
		<div class="viewport">
			<ul class="overview">
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
						<li>
							<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']}">
								<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product-combination/small/{$image['productImage']}" />
							</a>
						</li>
					{/foreach}
					{if $defProductImage !=''}
						<li>
							<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}">
								<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" />
							</a>
						</li>
					{/if}
				{else}
					<li>
						<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}">
							<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" />
						</a>
					</li>
				{/if}
			</ul>
		</div>
		
	</div>{if $productImages|count>4}	<a class="buttons next1" href="Javascript:void(0);">right</a>{/if}
    </div>
    {/if}
    </div>
{else}
<div class="img-slider slip"><div class="sliderInstruction text-center"> <span></span>{$language.lblRollOver}</div>
	{if $defProductImage !=''}
		<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}"/>
	{else}
		<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/preview/{$productImages[0]['productImage']}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$productImages[0]['productImage']}"/>
	{/if} 
    </div>
     {if $imageCount>1}
    <div class="thumb-view clearfix">
    	{if $productImages|count>4}<a class="buttons prev1" href="Javascript:void(0);" id="leftRv">left</a>{/if}
	<div id="slider1">
		<div class="viewport clearfix ">
			<ul class="overview">
				{if $defProductImage !=''}
					<li>
						<a href="#" data-image="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" data-zoom-image="{$view_public_path}/uploads/catalog/product/large/{$defProductImage}">
							<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" />
						</a>
					</li>
				{/if}
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
						<li>
						<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']}">
							<img id="img_01" class="img-responsive" src="{$view_public_path}/uploads/catalog/product/small/{$image['productImage']}" />
						</a>
					</li>
					{/foreach}
				{/if}
			</ul>
		</div>
	</div>	
   {if $productImages|count>4} <a class="buttons next1" href="Javascript:void(0);" id="rightRv">right</a>{/if}
    </div> 
    {/if}
{/if}	
<script type="text/javascript">
$(document).ready(function() {
	var thumbTotalWidth = 0;	
	$('.overview li').each(function(){
	thumbTotalWidth = thumbTotalWidth + $(this).outerWidth(true);
	});
	$('.overview').width(thumbTotalWidth);
	$("#leftRv").css("visibility", "hidden");
});
</script>