Shopify - Отображение тега ALT под изображением при увеличении изображения

В 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


jquery shopify zooming liquid-layout magiczoom
person Dipak G.    schedule 07.01.2015    source источник
comment
Это потому, что вы используете product.featured_image.alt для alt, который будет извлекать только alt-описание Feature_image независимо от изображения, на котором вы фокусируетесь. Если вам нужна дополнительная помощь, вам нужно будет опубликовать javascript для события масштабирования / фокусировки изображения.   -  person Funk Doc    schedule 07.01.2015
comment
Как уже говорилось, название темы Shopify: supply, которое использует MagicZoom для увеличения изображения. См. Интеграцию № 7 на странице magictoolbox.com/magiczoom/modules/shopify. Я хочу отображать ALT как заголовок / заголовок изображения во время масштабирования, чтобы product.featured_image.alt была правильной переменной. Не так ли?   -  person Dipak G.    schedule 07.01.2015
comment
избранное изображение - это только одно, равно как и его alt. Вы хотите изменить alt при щелчке или наведении курсора. Это означает редактирование сценария. Предполагая, что вы заплатили за этот плагин, я предлагаю вам попросить разработчиков помочь, если вы не знакомы с javascript.   -  person Funk Doc    schedule 07.01.2015
comment
Я не платил. Он интегрирован с темой Shopify supply, которая бесплатна.   -  person Dipak G.    schedule 07.01.2015
comment
Тогда дело в том, что вам нужно открыть файл js, связанный с плагином масштабирования, найти связанный код и добавить его в свой вопрос. Другого способа помочь нет.   -  person Funk Doc    schedule 07.01.2015
comment
Вы думаете добавить сюда соответствующую переменную {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' | title: 'product.featured_image.alt' }}"<span> {{ product.featured_image.alt | escape }} </span>{% endif %}>   -  person Dipak G.    schedule 07.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вы пытаетесь вручную настроить Magic Zoom. Это намного проще, если вы используете приложение Shopify для Magic Zoom Plus. Обратите внимание, что это улучшенная версия Magic Zoom. Это на сайте Shopify здесь: https://apps.shopify.com/magic-zoom-plus Поскольку это приложение, вы просто устанавливаете его, и вам не нужно вручную редактировать шаблоны.

person Dan Roberts    schedule 08.01.2015

arrow_upward
0
arrow_downward

Я не уверен, является ли это стандартным способом кодирования в 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>
person Dipak G.    schedule 08.01.2015