<div class="product-gallery-bottom" data-gallery-wrapper>
   {*<div class="product-photo-main">
      {$main_photo_dimensions = $cfg.Photo.types["product_detail"].size}
      <a {if $body.product.image}href="{get_photo photo=$body.product.image size=0}" data-rel="gallery"{/if}>
         <img src="{get_photo photo=$body.product.image size=3}"
              alt="{$photo.descr|default:$body.product.title}" class="img-responsive" width="{$main_photo_dimensions[0]}" height="{$main_photo_dimensions[1]}">
      </a>
   </div>*}

   {* todo:
      1. inicializovat galerii jen pokud je vic fotek nez visible_count
      2. navazat JS na data atribut
      3. pridat moznost disablovat JS - parametrem pri include
   *}
   {if $body.product.photos}
      {$photo_dimensions = $cfg.Photo.types.product_gallery_lg.size}
      {if !$visible_count}{$visible_count = 3}{/if}
      <div class="product-photos">
         <div id="product-gallery">
            {foreach $body.product.photos as $photo}
               {$photo_src = {get_photo photo=$photo size=16}}
               <a href="{get_photo photo=$photo size=0}" data-rel="gallery">
                  <img src="{$photo_src}" data-src="{get_photo photo=$photo size=16}"
                       alt="{$photo.descr|default:$body.product.title}"
                       class="img-responsive {if $body.product.photos|count > $visible_count}tns-lazy-img{/if}"
                       width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}">
               </a>
            {/foreach}
         </div>
      </div>
   {/if}
</div>
