test
parent
3242b38e83
commit
9fda5b3faf
|
|
@ -65,7 +65,29 @@
|
|||
id="Slider-Gallery-{{ section.id }}{{ id_append }}"
|
||||
class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile"
|
||||
role="list">
|
||||
|
||||
{%- if product.selected_or_first_available_variant.featured_media != null -%}
|
||||
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
|
||||
class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
||||
data-media-id="{{ section.id }}-{{ featured_media.id }}">
|
||||
{%- assign media_position = 1 -%}
|
||||
{% render 'product-thumbnail'
|
||||
, media: featured_media
|
||||
, media_count: media_count
|
||||
, position: media_position
|
||||
, desktop_layout: section.settings.gallery_layout
|
||||
, mobile_layout: section.settings.mobile_thumbnails
|
||||
, loop: section.settings.enable_video_looping
|
||||
, modal_id: section.id
|
||||
, xr_button: true
|
||||
, media_width: media_width
|
||||
, media_fit: section.settings.media_fit
|
||||
, constrain_to_viewport: section.settings.constrain_to_viewport
|
||||
, lazy_load: false
|
||||
%}
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- for media in product.media -%}
|
||||
{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
|
||||
<li
|
||||
|
|
@ -100,29 +122,6 @@
|
|||
</li>
|
||||
{%- endunless -%}
|
||||
{%- endfor -%}
|
||||
{%- if product.selected_or_first_available_variant.featured_media != null -%}
|
||||
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
|
||||
class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
||||
data-media-id="{{ section.id }}-{{ featured_media.id }}">
|
||||
{%- assign media_position = 1 -%}
|
||||
{% render 'product-thumbnail'
|
||||
, media: featured_media
|
||||
, media_count: media_count
|
||||
, position: media_position
|
||||
, desktop_layout: section.settings.gallery_layout
|
||||
, mobile_layout: section.settings.mobile_thumbnails
|
||||
, loop: section.settings.enable_video_looping
|
||||
, modal_id: section.id
|
||||
, xr_button: true
|
||||
, media_width: media_width
|
||||
, media_fit: section.settings.media_fit
|
||||
, constrain_to_viewport: section.settings.constrain_to_viewport
|
||||
, lazy_load: false
|
||||
%}
|
||||
</li>
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
{%- unless is_duplicate -%}
|
||||
<div class="slider-buttons no-js-hidden quick-add-hidden{% if hide_mobile_slider %} small-hide{% endif %}">
|
||||
|
|
@ -183,6 +182,39 @@
|
|||
(min-width: 750px) calc((100vw - 15rem) / 8),
|
||||
calc((100vw - 8rem) / 3)
|
||||
{%- endcapture -%}
|
||||
{%- if featured_media != null -%}
|
||||
{%- liquid
|
||||
capture media_index
|
||||
if featured_media.media_type == 'model'
|
||||
increment model_index
|
||||
elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
|
||||
increment video_index
|
||||
elsif featured_media.media_type == 'image'
|
||||
increment image_index
|
||||
endif
|
||||
endcapture
|
||||
assign media_index = media_index | plus: 1
|
||||
-%}
|
||||
<li
|
||||
id="Slide-Thumbnails-{{ section.id }}-0{{ id_append }}"
|
||||
class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}"
|
||||
data-target="{{ section.id }}-{{ featured_media.id }}"
|
||||
data-media-position="{{ media_index }}">
|
||||
{%- capture thumbnail_id -%}
|
||||
Thumbnail-{{ section.id }}-0{{ id_append }}
|
||||
{%- endcapture -%}
|
||||
<button
|
||||
class="thumbnail global-media-settings global-media-settings--no-shadow"
|
||||
aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
|
||||
aria-current="true"
|
||||
aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
|
||||
aria-describedby="{{ thumbnail_id }}">
|
||||
{{
|
||||
featured_media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: featured_media.alt | escape
|
||||
}}
|
||||
</button>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- for media in product.media -%}
|
||||
{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
|
||||
{%- liquid
|
||||
|
|
@ -234,40 +266,6 @@
|
|||
</li>
|
||||
{%- endunless -%}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- if featured_media != null -%}
|
||||
{%- liquid
|
||||
capture media_index
|
||||
if featured_media.media_type == 'model'
|
||||
increment model_index
|
||||
elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
|
||||
increment video_index
|
||||
elsif featured_media.media_type == 'image'
|
||||
increment image_index
|
||||
endif
|
||||
endcapture
|
||||
assign media_index = media_index | plus: 1
|
||||
-%}
|
||||
<li
|
||||
id="Slide-Thumbnails-{{ section.id }}-0{{ id_append }}"
|
||||
class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}"
|
||||
data-target="{{ section.id }}-{{ featured_media.id }}"
|
||||
data-media-position="{{ media_index }}">
|
||||
{%- capture thumbnail_id -%}
|
||||
Thumbnail-{{ section.id }}-0{{ id_append }}
|
||||
{%- endcapture -%}
|
||||
<button
|
||||
class="thumbnail global-media-settings global-media-settings--no-shadow"
|
||||
aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
|
||||
aria-current="true"
|
||||
aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
|
||||
aria-describedby="{{ thumbnail_id }}">
|
||||
{{
|
||||
featured_media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: featured_media.alt | escape
|
||||
}}
|
||||
</button>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
Loading…
Reference in New Issue