Question

在Shopify中，图像ALT标记（显示在主图像下方）在图像缩放时不会改变。

enter image description here

我正在使用＆＃39;供应＆＃39; Shopify的主题，以下是 product.liquid

下的图片代码

<div class="grid-item large--eleven-twelfths text-center">

    <div class="product-photo-container" id="productPhoto">
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
      <img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
      <span> {{ product.featured_image.alt | escape }} </span>         
    </div>

    {% if product.images.size > 1 %}
      <ul class="product-photo-thumbs grid-uniform" id="productThumbs">

        {% for image in product.images %}
          <li class="grid-item one-quarter">
            <a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb">
              <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">

            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
</div>

在此发布答案：https://stackoverflow.com/a/27837584/1266584

Answer 1

您正在尝试手动设置Magic Zoom。如果您使用Shopify App for Magic Zoom Plus，会更容易。请注意，这是Magic Zoom的高级版本。它位于Shopify网站上：https://apps.shopify.com/magic-zoom-plus因为它是一个应用程序，您只需安装它，而无需手动编辑模板。

Answer 2

我不确定这是否是在Shopify中编码的标准方式，但已设法以这种方式修复它。这是代码 - product.liquid ：

<div class="grid-item large--two-fifths">
<div class="grid">
  <div class="grid-item large--eleven-twelfths text-center">
    <div class="product-photo-container" id="productPhoto">
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
      <img id="productPhotoImg" src="{{ featured_image | img_url: 'large'}}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' | caption: 'Logo' }}"{% endif %}>
      <div id="imgAltCaption">{{ featured_image.alt | escape }}</div>
    </div>
    {% if product.images.size > 1 %}
      <ul class="product-photo-thumbs grid-uniform" id="productThumbs">

        {% for image in product.images %}
          <li class="grid-item one-quarter">
            <a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb" title="{{ image.alt | escape }}">
              <img id='imgVariants' src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}" data-altvalue="{{ image.alt | escape }}">
            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>

...和...

<script>
  $(document).ready(function(){
    $('.product-photo-thumb').on("click", function (e) {
      e.preventDefault();
      $('#imgAltCaption').text(e.target.alt);
    });
  });
</script>

Shopify - 在图像缩放上方的图像下方显示ALT标签

2 个答案: