{literal}
<script>
   $(document).ready(function(e){
    
    document.activeElement.blur();
   $('.sp-thumbnail').click(function(){
   	if(document.activeElement) {
   		document.activeElement.blur(); 
   	}
   });
   $('.sp-image').click(function(){
   	if(document.activeElement) {
   		document.activeElement.blur();  
   	}
   });
   
   
   var hidden_sold_status=$('#hidden_sold_status').val();		
   var hidden_is_sold=$('#hidden_is_sold').val();	
   var hidden_free_shipping=$('#hidden_free_shipping').val();	
   
   if(hidden_sold_status!='Sold')
   {
   if(hidden_is_sold == 'Yes'){
   $( ".sp-image-container" ).prepend( "<div id='sold'></div>" );
   
   }	
   else if(hidden_free_shipping=='Yes')
   {	
   $( ".sp-image-container" ).prepend( "<div id='free_shipping'></div>" );
   }	
   }
   
   var img_count=$('#hidden_image_count').val();
   
   if(img_count<=2)
   {
   $( '#example3' ).sliderPro( 'loop', 'false' );
   }
   }); 
</script>
{/literal}
<input type="hidden" id="hidden_sold_status" value="{$product.sold_status}">
<input type="hidden" id="hidden_is_sold" value="{$product.is_sold}">
<input type="hidden" id="hidden_free_shipping" value="{$product.free_shipping}">
<input type="hidden" id="hidden_image_count" value="{$product.secondary_images|@count}">

<!--
<div id="example3" class="slider-pro">
   <div class="sp-slides" style="height: inherit;">
     
      {assign var="imageId" value="image-no-image-small"}
      {assign var="bigimageId" value="image-no-image-big"}
      {assign var="imageId2" value="coming-soon"}
      {assign var="bigimageId2" value="coming-soon-big"} 
      {foreach from=$product.secondary_images item="secondary_image"}	
      <li ><img src="{if $secondary_image.img_src}{$secondary_image.img_src}{else} {$designImages.$bigimageId.content}{/if}"  alt="{$secondary_image.alt_text}" /><span>{$secondary_image.alt_text}</span></li>
      <div class="sp-slide">
         <img class="sp-image" {if !$secondary_image.img_src} id="no_image" {/if} src="{if $secondary_image.img_src}{$secondary_image.img_src}{else }{$designImages.$bigimageId.content}{/if}" />
         <p class="sp-layer sp-black sp-padding"
            data-position="bottomLeft" data-vertical="0" data-width="100%"
            data-show-transition="up">
            {$secondary_image.alt_text}
         </p>
      </div>
      {/foreach}						
   </div>
   <div class="sp-thumbnails">
      {$product.secondary_images|@print_r}
      {foreach from=$product.secondary_images item="secondary_image"}	
      <img class="sp-thumbnail"  src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$designImages.$imageId.content}{/if}" />			
      {/foreach}	
   </div>
</div>
--> 

<!-- New slider(fotorama) START, Changed by Foram 2-8-2016 --> 

      {assign var="imageId" value="image-no-image-small"}
      {assign var="bigimageId" value="image-no-image-big"}
      {assign var="imageId2" value="coming-soon"}
      {assign var="bigimageId2" value="coming-soon-big"} 
       
      <center>
		   <div class="fotorama" data-nav="thumbs">
			  {foreach from=$product.secondary_images item="secondary_image"}		
			  <img src="{if $secondary_image.thumb_src}{$secondary_image.img_src}{else} {$designImages.$bigimageId.content}{/if}"  alt="{$secondary_image.alt_text}"  />
			  {/foreach}	
		   </div>
	</center>
<!-- New slider(fotorama) END-->