{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% liquid
  for tag in product.tags
    if tag contains 'newlabel'
      assign productTag = 'collections.general.newlabel' | t
    elsif tag contains 'partylabel'
     assign productTag = 'collections.general.partylabel' | t
    elsif tag contains 'duurzaamlabel'
      assign productTag = 'collections.general.duurzaamlabel' | t
    elsif tag contains 'giftlabel'
      assign productTag = 'collections.general.giftlabel' | t
    elsif tag contains 'cominglabel'
      assign productTag = 'collections.general.cominglabel' | t
    elsif tag contains 'preorder'
      assign productTag = 'collections.general.pre_order' | t
    elsif tag contains 'label1'
      assign productTag = 'collections.general.label1' | t
    elsif tag contains 'label2'
      assign productTag = 'collections.general.label2' | t
    elsif tag contains 'label3'
      assign productTag = 'collections.general.label3' | t
    endif
  endfor
%}


<div class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %}">
  <ul class="slides">
    {% for image in product.images %}
      <li data-thumb="{{ image | product_img_url: '400x400' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
        {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
          {% assign src = image.alt | split: 'src="' %}
          {% assign src = src[1] | split: '"' | first %}

          {% if src contains '?' %}
            {% assign src = src | append: '&amp;autoplay=1' %}
          {% else %}
            {% assign src = src | append: '?autoplay=1' %}
          {% endif %}

          <div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}">
            <div>
              <a href="{{ src }}" class="fancybox fancybox.iframe" data-fancybox-group="{{ product.id }}" title="{{ product.title | escape }}">
                {{ image.alt }}
              </a>
            </div>
          </div>
        {% else %}
          <a href="{{ image | product_img_url: '2048x' }}" class="fancybox" data-fancybox-group="{{ product.id }}" title="{{ image.alt | escape }}">
            <div class="image__container" style="max-width: {{ image.width }}px">
              <div class="image__inner">
                <img  src="{{ image | product_img_url: '300x' }}"
                      alt="{{ image.alt | escape }}"
                      class="lazyload lazyload--fade-in cloudzoom {% if featured_image.id == image.id %}featured_image{% endif %}"
                      data-image-id="{{ image.id }}"
                      data-index="{{ forloop.index0 }}"
                      data-cloudzoom="zoomImage: '{{ image | product_img_url: '2048x' }}', tintColor: '{{ settings.shop_bg_color }}', zoomPosition: 'inside', zoomOffsetX: 0, touchStartDelay: 250, lazyLoadZoom: true"
                      data-sizes="auto"
                      data-srcset=" {{ image | product_img_url: '2048x' }} 2048w,
                                    {{ image | product_img_url: '1900x' }} 1900w,
                                    {{ image | product_img_url: '1600x' }} 1600w,
                                    {{ image | product_img_url: '1200x' }} 1200w,
                                    {{ image | product_img_url: '1000x' }} 1000w,
                                    {{ image | product_img_url: '800x' }} 800w,
                                    {{ image | product_img_url: '600x' }} 600w,
                                    {{ image | product_img_url: '400x' }} 400w"
                      data-src="{{ image | product_img_url: '2048x' }}"
                      />
                {% if productTag != blank %}
                  <div class="new_banner">{{ productTag }}</div>
                {% endif %}
              </div>
            </div>
          </a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
&nbsp;