Shopify - 在下方顯示ALT標籤圖像放大圖像

在Shopify中，圖像ALT標籤（顯示在主圖像下方）在圖像縮放時不會改變。Shopify - 在下方顯示ALT標籤圖像放大圖像

enter image description here

我使用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

來源

2015-01-07 Dipak G.

那是因爲你使用product.featured_image.alt爲ALT這隻會拉featured_image無論你關注的圖像如何如果您需要更多幫助，您需要發佈圖像縮放/焦點事件的JavaScript –

如上所述，Shopify主題名稱是：'供應'，它使用'MagicZoom'進行圖像縮放。請參閱https://www.magictoolbox.com/magiczoom/modules/shopify/上的集成＃7。我想要的是在縮放期間將ALT顯示爲圖像的標題/標題，因此'product.featured_image.alt'是正確的變量。不是嗎？ –

特色圖片只有一個，其他圖片也是如此。你想要改變點擊或懸停的ALT。這意味着編輯腳本。假設你爲這個插件付費，如果你不熟悉javascript，我建議你讓開發人員幫忙。 –

你正在嘗試手動設置Magi c縮放。如果您使用適用於Magic Zoom Plus的Shopify應用程序，則會更容易。請注意，這是Magic Zoom的高級版本。它在Shopify網站上：https://apps.shopify.com/magic-zoom-plus因爲它只安裝一個應用程序，不需要手動編輯模板。

來源

2015-01-08 04:42:44

我不確定這是否是在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-08 10:13:24

Shopify - 在下方顯示ALT標籤圖像放大圖像

回答

相關問題