{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" style="text-align:center;">
<div>
<ul class="image-selector clearfix">
{if $product.image}
<li>
<a href="#image-0" title="{$product.caption}"><img src="{$product.thumb}" {if $product.image_location == "Web"}width="{$CatalogThumbSize}"{/if} alt="{if $product.image_alt_text != ''}{$product.image_alt_text|htmlspecialchars}{else}{$product.title|htmlspecialchars}{/if}" title="{$product.title|htmlspecialchars}" data-img-src="{if $product.image_location=="Local"}{$url_base}{/if}{$product.image}"/></a>
</li>
{/if}
{assign var="thumbcounter" value=1}
{foreach from=$product.secondary_images item="secondary_image"}
<li>
<a href="#image-{$thumbcounter}" title="{$secondary_image.caption}"><img src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}" /></a>
</li>
{assign var="thumbcounter" value=$thumbcounter+1}
{/foreach}
</ul>
{if !$is_print_version}<div class="gap-top click-to-enlarge">{$msg.product.enlarge_image}</div>{/if}
</div>
</div>
</div>
{/if}