Hi! I use Warehouse theme. And i have an issue with zoom. On all products the hover (zoom) image is wrong. Help please:D
Here is the code of product-gallery.liquid
{%- if product.media.size > 0 -%}
{%- assign show_thumbnails_if_one_media = true -%}
<div class="card">
<div class="card__section card__section--tight">
<div class="product-gallery {% if show_thumbnails_if_one_media %}product-gallery--with-thumbnails{% endif %}">
{%- assign selected_media = product.selected_variant.featured_media | default: product.featured_media -%}
<div class="product-gallery__carousel-wrapper">
<div class="product-gallery__carousel {% if template != 'product.quick-view' and section.settings.enable_image_zoom %}product-gallery__carousel--zoomable{% endif %}" data-media-count="{{ product.media.size }}" data-initial-media-id="{{ selected_media.id }}">
{%- for media in product.media -%}
{%- assign is_media_group = false -%}
{%- assign is_media_filtered = false -%}
{%- assign media_alt = media.alt -%}
{%- if media.alt contains '#' -%}
{%- assign is_media_group = true -%}
{%- assign alt_parts = media.alt | split: '#' -%}
{%- comment -%}
If the custom ALT tag contains two parts (for instance "My custom alt # color_blue") then the first part is actually used
as a custom ALT tag
{%- endcomment -%}
{%- if alt_parts.size == 2 and alt_parts.first != blank -%}
{%- assign media_alt = alt_parts.first | strip -%}
{%- else -%}
{%- assign media_alt = product.title -%}
{%- endif -%}
{%- assign media_group_parts = alt_parts.last | split: '_' -%}
{%- for option in product.options -%}
{%- assign downcase_option = option | downcase -%}
{%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}
{%- if downcase_option == downcase_group_option -%}
{%- assign option_setting = 'option' | append: forloop.index -%}
{%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}
{%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
{%- assign media_variant_ids = media.variants | map: 'id' -%}
{%- if option_value != downcase_group_value -%}
{%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
{%- assign is_media_filtered = true -%}
{%- endunless -%}
{%- endif -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
<div class="product-gallery__carousel-item {% if media.id == selected_media.id %}is-selected{% endif %} {% if is_media_filtered %}is-filtered{% endif %}" tabindex="-1" data-media-id="{{ media.id }}" data-media-type="{{ media.media_type | escape }}" {% if media.media_type == 'external_video' %}data-media-host="{{ media.host | escape }}" data-video-id="{{ media.external_id | escape }}"{% endif %} {% if is_media_group %}data-group-name="{{ media_group_parts.first | strip | downcase | escape }}" data-group-value="{{ media_group_parts.last | strip | downcase | escape }}"{% endif %}>
{%- case media.media_type -%}
{%- when 'image' -%}
<div class="product-gallery__size-limiter" style="max-width: {{ media.width }}px">
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '400,500,600,700,800,900,1000,1100,1200', image: media -%}{%- endcapture -%}
{%- assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
<img class="product-gallery__image lazyload image--blur-up" src="{{ media | img_url: '60x' }}" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-zoom="{{ media | img_url: '1600x' }}" alt="{{ media_alt | escape }}">
<noscript>
<img src="{{ media | img_url: '800x' }}" alt="{{ media_alt | escape }}">
</noscript>
</div>
</div>
{%- when 'model' -%}
<div class="product-gallery__model">
<div class="model-wrapper">
{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
</div>
</div>
{%- when 'external_video' -%}
<div class="product-gallery__external-video">
<div class="video-wrapper">
{{- media | external_video_tag: image_size: '1024x' -}}
</div>
</div>
{%- when 'video' -%}
<div class="product-gallery__video">
<div class="video-wrapper video-wrapper--native" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
{{- media | video_tag: image_size: '1024x', controls: true -}}
</div>
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
{%- if first_3d_model -%}
<button class="product-gallery__view-in-space button button--full" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-model3d-default-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
{%- render 'icon', icon: 'media-view-in-space' -%} {{- 'product.general.view_in_space' | t -}}
</button>
{%- endif -%}
{%- if template != 'product.quick-view' and section.settings.enable_image_zoom -%}
<span class="product-gallery__zoom-notice">{% render 'icon', icon: 'zoom' %} {{ 'product.general.zoom' | t }}</span>
{%- endif -%}
</div>
{%- if show_thumbnails_if_one_media -%}
<div class="scroller">
<div class="scroller__inner">
<div class="product-gallery__thumbnail-list">
{%- for media in product.media -%}
{%- assign is_media_group = false -%}
{%- assign is_media_filtered = false -%}
{%- assign media_alt = media.alt -%}
{%- if media.alt contains '#' -%}
{%- assign is_media_group = true -%}
{%- assign alt_parts = media.alt | split: '#' -%}
{%- comment -%}
If the custom ALT tag contains two parts (for instance "My custom alt # color_blue") then the first part is actually used
as a custom ALT tag
{%- endcomment -%}
{%- if alt_parts.size == 2 and alt_parts.first != blank -%}
{%- assign media_alt = alt_parts.first | strip -%}
{%- else -%}
{%- assign media_alt = product.title -%}
{%- endif -%}
{%- assign media_group_parts = alt_parts.last | split: '_' -%}
{%- for option in product.options -%}
{%- assign downcase_option = option | downcase -%}
{%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}
{%- if downcase_option == downcase_group_option -%}
{%- assign option_setting = 'option' | append: forloop.index -%}
{%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}
{%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
{%- assign media_variant_ids = media.variants | map: 'id' -%}
{%- if option_value != downcase_group_value -%}
{%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
{%- assign is_media_filtered = true -%}
{%- endunless -%}
{%- endif -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
<a href="{{ media | img_url: '1024x' }}" class="product-gallery__thumbnail {% if media.id == selected_media.id %}is-nav-selected{% endif %} {% if is_media_filtered %}is-filtered{% endif %}" data-media-id="{{ media.id }}" {% if is_media_group %}data-group-name="{{ media_group_parts.first | strip | downcase | escape }}" data-group-value="{{ media_group_parts.last | strip | downcase | escape }}"{% endif %}>
{%- comment -%}Based on the type of media, we have to add an icon as per Shopify rules{%- endcomment -%}
{%- case media.media_type -%}
{%- when 'model' -%}
<span class="product-gallery__thumbnail-badge">{% render 'icon', icon: 'media-model-badge' %}</span>
{%- when 'video' or 'external_video' -%}
<span class="product-gallery__thumbnail-badge">{% render 'icon', icon: 'media-video-badge' %}</span>
{%- endcase -%}
<!-- <div class="aspect-ratio" > -->
<img src="{{ media | img_url: '130x' }}" alt="{{ media_alt | escape }}">
<!-- </div> -->
</a>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
</div>
</div>
</div>
{%- endif -%}Here is js of zoom:
key: '_createZoom',
value: function _createZoom() {
var _this20 = this;
if (this.options['enableImageZoom']) {
this.driftObjects = [];
var zoomWrapper = this.element.querySelector('.product__zoom-wrapper');
// While Drift has a "handleTouch" option, we've found it's not working well, so we are doing our own
// test here to prevent loading it at all on mobile
if (__WEBPACK_IMPORTED_MODULE_0__helper_Responsive__["default"].matchesBreakpoint('supports-hover')) {
this.element.querySelectorAll('.product-gallery__image').forEach(function (image) {
_this20.driftObjects.push(new Drift(image, {
containInline: _this20.options['zoomEffect'] === 'outside',
inlinePane: window.innerWidth < 1024 ? true : _this20.options['zoomEffect'] !== 'outside',
hoverBoundingBox: _this20.options['zoomEffect'] === 'outside',
handleTouch: false,
inlineOffsetY: window.innerWidth < 1024 ? -85 : 0,
paneContainer: zoomWrapper
}));
});
}
}
}
}
