product-images.liquid
Tue Jan 11 2022 13:07:29 GMT+0000 (Coordinated Universal Time)
Saved by @brentvanholder #html
{% 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: '&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>
Comments