javascript - Shopify 网站上产品 slider 中的图片和视频

Question

我需要一些帮助来在 Shopify 中创建一个允许您添加图像和视频的产品 slider 。目前 slider 工作正常，但我在向 slider 添加产品视频时遇到问题。

根据我的阅读，您可以使用 alt 标签添加 YouTube 嵌入代码，该代码将覆盖图像并显示视频。我可以让它在第一张图片上工作，但它有一个租约来打破 slider 的其余部分。我相信我可能需要更改默认 slider 并使用另一种选择。

这是我目前的情况

  $('#FeaturedImageZoom-product-template .product-featured-img').each (function() {

    var videoid = $(this).attr("alt");
    console.log(videoid);

    if ($('.product-featured-img').attr("alt") == videoid) {         
      $(this).replaceWith('<iframe width="500px" height="500px" src="'+videoid+'?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>');
    } 

  });

这是与之相关的流动代码:

<div class="grid product-single">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
  {%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
  {%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
  <div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}" {% if enable_zoom %}data-zoom="{{ featured_img_src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
    <img src="{{ featured_img_src | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}">
  </div>

  {% if product.images.size > 1 %}
    {% if product.images.size > 3 %}
      {%- assign enable_thumbnail_slides = true -%}
    {% endif %}

    <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
      {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
          {% include 'icon-chevron-left' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
        </button>
      {% endif %}
      <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
        {% for image in product.images %}
          <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
            <a
              href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
                class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                <img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
            </a>
          </li>
        {% endfor %}
      </ul>
      {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
          {% include 'icon-chevron-right' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
        </button>
      {% endif %}
    </div>
  {% endif %}
</div>

我已经阅读了几篇文章，其中概述了开发人员尝试添加产品视频时遇到的类似问题，但我还没有找到解决方案。

如果有人能在这里提供帮助，我们将不胜感激。

谢谢

Answer 1

当你可以简单地使用 liquid 时，为什么要为此使用 javascript？

如果 alt 属性包含 youtube 或其他独特内容，您只需添加检查。

例如:

{% if image.alt contains 'youtube' %}
    <iframe width="500px" height="500px" src="{{image.alt}}?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>
{% else %}
    <a
      href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
        class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
        {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
        <img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
    </a>
{% endif %}