{% assign section_id_wrap = '' %}
{% if section.id %}

	{% assign section_id_wrap = '-' | append: section.id  %}
{% endif %} 
{% if product.images.size >0%}
      	{% assign zoomClass = 'hasPop' %}
      	{%if settings.product_zoom_type == 'inpage' %}
      		{% assign zoomClass = 'trigger_zoom' %}
      	{%endif%}

		<div data-actual_pro_id="{{ product.id }}" data-product_id="{{ product.id }}{{ section_id_wrap }}" class="product_image_list_wrapper product_image_list_size_{{ product.images.size }} product_id_{{ product.id }}">
          <div id="product_image_list" class="productMainImage productMainImage_{{ product.id }}{{ section_id_wrap }}" data-attrchange="true">
            {% assign count = 0 %}
            {%for image in product.images%} 
              <div>
                <a data-count="{{ count }}" data-product_id="{{ product.id }}{{ section_id_wrap }}" data-image_zoom="zoom_images_count_1" href="{{ image.src | img_url: settings.main_image_quality | split:'?' | first }}" data-getPopout="#gallery" class="featuredImage featuredImage_{{ product.id }}{{ section_id_wrap }} flexItem {{ zoomClass }}">
                  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
                  {% if settings.product_image_loading_type == 'lazy' %}

                  <img data-img="{{ image.src }}" class="lazyloadimage1 lazyload blur-up1" src="" alt="{{ image.alt | escape }}" data-lowsrc="{{ image | img_url: '100x100' }}" data-src="{{ image | img_url: settings.main_image_quality }}" data-alt="{{ image.alt | escape }}" >
                  {% else %}
                  <img data-img="{{ image.src }}" src="{{ image | img_url: settings.main_image_quality }}" alt="{{ image.alt | escape }}" >
                  {% endif %}

                </a>
              </div>
            {% assign count = count | plus: 1 %}
            {%endfor%}
          </div>
           {% if product.images.size > 1 %}
          	<span class="product_image_list_prev product_image_list_prev_{{ product.id }}{{ section_id_wrap }}">{% include 'product-icons'  icon_type: settings.main_image_arrow_type  %}</span>
          	<span class="product_image_list_next product_image_list_next_{{ product.id }}{{ section_id_wrap }}">{% include 'product-icons'  icon_type: settings.main_image_arrow_type  %}</span>
          {%endif%}
		</div>
        {% if product.images.size > 0 %}
      	<div id="thumbs_list" class="productThumbs gridAlignTop ninth flexItem productThumbs_size_{{ product.images.size }}">
            <div id="thumbs_list_frame" class="thumbs_list_frame thumbs_list_frame_{{ product.id }}{{ section_id_wrap }}">
              
              {% assign count = 0 %}
              {%for image in product.images%} 
                
              <div class="thum_img_wrap {% if count == 0 %}current_slide{% endif %}" data-product_id="{{ product.id }}{{ section_id_wrap }}" data-img="{{ image.src }}" data-counter="{{ count }}" data-image_zoom="zoom_images_count_{{ count }}" data-index_id="#indexImage_{{forloop.index}}">
              	<img src="{{ image.src | img_url: '100X100' }}" alt="{{ image.alt | escape }}">
              </div>
                  {% assign count = count | plus: 1 %}
              {%endfor%}
              
            </div>
          	<span class="thumbs_list_up hidearrow thumbs_list_up_{{ product.id }}{{ section_id_wrap }}"><i>{% include 'product-icons'  icon_type: settings.miniatures_image_arrow_type  %}</i></span>
          	<span class="thumbs_list_down hidearrow thumbs_list_down_{{ product.id }}{{ section_id_wrap }}"><i>{% include 'product-icons'  icon_type: settings.miniatures_image_arrow_type  %}</i></span>
        </div>
        {%endif%}
      {%endif%}