Ad

Images And Videos In Product Slider On Shopify Site

- 1 answer

I require some help in creating a product slider in Shopify that allows you to add images and videos. At the moment the slider is working fine but I am having issues adding product videos to the slider.

From what I have read you can use the alt tag to add a YouTube embed code that will overwrite the image and display the video. I can get this working for the first image but it has a tenancy to break the rest of the slider. I believe I might need to change up the default slider and head with another alternative.

Here is what I have so far

  $('#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>');
    } 

  });

And here is the liquid code to go with that:

<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
              target="_blank" rel="nofollow noreferrer" 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>

I have read a couple of posts that outline a similar issue with developers trying to add a product videos however I have yet to come across a solution.

If anyone can help out here that would be appreciated.

Thanks

Ad

Answer

Why use javascript for this when you can use simply liquid?

You just need to add check for the alt attribute if it contains youtube or something unique.

So for example:

{% 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
      target="_blank" rel="nofollow noreferrer" 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 %}
Ad
source: stackoverflow.com
Ad