Shopify - 在图像缩放时在图像下方显示 ALT 标签答案

【问题标题】：Shopify - Display ALT tag below Image on Image ZoomShopify - 在图像缩放时在图像下方显示 ALT 标签
【发布时间】：2015-01-07 16:27:36
【问题描述】：

在 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

【问题讨论】：

那是因为您使用 product.featured_image.alt 作为替代品，无论您关注的图像是什么，它都只会拉出 features_image 替代品描述。如果您需要更多帮助，您需要发布图像缩放/焦点事件的 javascript
如前所述，Shopify 主题名称是：supply，它使用MagicZoom 进行图像缩放。请参阅magictoolbox.com/magiczoom/modules/shopify 的集成 #7。我想要的是在缩放期间将 ALT 显示为图像的标题/标题，因此 product.featured_image.alt 是正确的变量。不是吗？
特色图片是一回事，它的替代品也是如此。您想在单击或悬停时更改 alt。这意味着编辑脚本。假设您为此插件付费，如果您不熟悉 javascript，建议您向开发人员寻求帮助。
我没有付款。它与免费的 Shopify 主题 supply 集成在一起。
那么问题是您必须打开与缩放插件相关的 js 文件，找到相关代码并将其添加到您的问题中。没有其他方法可以提供帮助。

标签： jquery shopify zooming liquid-layout magiczoom

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：