0

在 Shopify 中，图像 ALT 标签（显示在主图像下方）在图像缩放上没有变化。

在此处输入图像描述

我正在为 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

4

2 回答 2

1

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

于 2015-01-08T04:42:44.530 回答
0

我不确定这是否是在 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>
于 2015-01-08T10:13:24.457 回答