{counter name="productPageSecondaryImagesCounter" assign="productPageSecondaryImagesCounter"}
{if !empty($product.secondary_images) && $productPageSecondaryImagesCounter == 1}
<div class="product-secondary-images clearfix product-page-block {class file=$smarty.template editable=true}">
	<h3 class="product-page-block-header">{$msg.product.secondary_images}</h3>
	<div class="spacer product-page-block-content">
		<div class="MagicScroll" data-options="items: 4;">
			<div class="product-secondary-image product-secondary-image-{$secondary_image.iid}"><a href="{$product.image}" width="{$product.image_width}" height={$product.image_height} id="{$product.product_id|htmlspecialchars}" data-thumb-id="{$product.product_id|htmlspecialchars}" data-image="{$product.preview}" title="{if $product.image_alt_text != ''}{$product.image_alt_text|htmlspecialchars}{else}{$product.title|htmlspecialchars}{/if}">
				<img src="{$product.preview}"  alt="{if $product.image_alt_text != ''}{$product.image_alt_text|htmlspecialchars}{else}{$product.title|htmlspecialchars}{/if}"  title="{if $product.image_alt_text != ''}{$product.image_alt_text|htmlspecialchars}{else}{$product.title|htmlspecialchars}{/if}" width="100"/>
			</a></div>
			{foreach from=$product.secondary_images item="secondary_image"}
			
					<div class="product-secondary-image product-secondary-image-{$secondary_image.iid}">
						{if !$is_print_version}
						
							{if $zoom_option_secondary == "magicthumb"}
							
							
							
								<a href="{$secondary_image.img_src}" data-thumb-id="{$product.product_id|htmlspecialchars}" data-image="{$secondary_image.img_src}" title="{if $secondary_image.alt_text}{$secondary_image.alt_text}{else}{$product.title}{/if}">
									<img {if $product_secondary_thumb_type == "Square"}style="height: {$product_secondary_thumb_size}px; width: {$product_secondary_thumb_size}px;"{else}height="{$product_secondary_thumb_size}" width="{$product_secondary_thumb_size}"{/if} {if !$secondary_image.thumb_src}{$secondary_image.thumb_size}{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}"/>
	
								</a>
								
								
							{elseif $zoom_option_secondary == "imagelayover"}
								<a href="{$secondary_image.img_src}" rel="lightbox" title="{$secondary_image.caption}">
									<img {if $product_secondary_thumb_type == "Square"}style="height: {$product_secondary_thumb_size}px; width: {$product_secondary_thumb_size}px;"{else}height="{$product_secondary_thumb_size}" width="{$product_secondary_thumb_size}"{/if} {if !$secondary_image.thumb_src}{$secondary_image.thumb_size}{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}" title="{$secondary_image.alt_text}" />
								</a>
							{else}
								<a href="javascript:showImage('{$url_base}{$secondary_image.img_src}','{$secondary_image.width}','{$secondary_image.height}');">
									<img {if $product_secondary_thumb_type == "Square"}style="height: {$product_secondary_thumb_size}px; width: {$product_secondary_thumb_size}px;"{else}height="{$product_secondary_thumb_size}" width="{$product_secondary_thumb_size}"{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}"/>
								</a>
							{/if}
						{else}
							<img {if $product_secondary_thumb_type == "Square"}style="height: {$product_secondary_thumb_size}px; width: {$product_secondary_thumb_size}px;"{else}height="{$product_secondary_thumb_size}" width="{$product_secondary_thumb_size}"{/if} {if !$secondary_image.thumb_src}{$secondary_image.thumb_size}{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}"/>
						{/if}
					</div>

			{/foreach}
		</div>
		{if !$is_print_version}<div class="gap-top click-to-enlarge">{$msg.product.enlarge_image}</div>{/if}
		</div>
	</div>	

{/if}