Shopify 사이트의 제품 슬라이더에있는 이미지 및 비디오

Question

Shopify에서 이미지 및 비디오를 추가 할 수있는 제품 슬라이더를 만드는 데 도움이 필요합니다. 지금은 슬라이더가 잘 작동하지만 슬라이더에 제품 비디오를 추가하는 데 문제가 있습니다.

내가 읽은 바로는 alt 태그를 사용하여 이미지를 덮어 쓰고 비디오를 표시하는 YouTube 소스 코드를 추가 할 수 있습니다. 첫 번째 이미지에서이 작업을 수행 할 수 있지만 슬라이더의 나머지 부분을 분해하는 임차가 있습니다. 기본 슬라이더를 변경하고 다른 대안으로 머리를 바꿀 필요가 있다고 생각합니다.

<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> 

나는 개발자들과 유사한 문제를 간략하게 설명 게시물의 몇 가지를 읽고 : 여기

내가 여기까지

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

    }); 

그리고 그와 함께 갈 수있는 액체 코드가 무엇인가 그러나 제품 비디오를 추가하려고하지만 아직 해결책을 찾지 못했습니다.

누구든지 도움을 주실 수 있으면 감사하겠습니다.

감사합니다.

Answer 1

액체를 사용할 때 왜 자바 스크립트를 사용합니까?

youtube 또는 고유 한 것이 있으면 alt 속성에 대한 확인 만하면됩니다. 그래서 예를 들면

는 :

{% 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 %} 

Answer 2

난 그냥 "물방울"에 의해 위의 답변에 따라 도착 솔루션을 게시하고 싶었다. 나는 이것이 다른 누군가를 도와 줄 수 있기를 희망합니다. 축소판 자리로 이미지를 사용하는 동안 이미지의 ALT 태그에 소스 코드를 배치 할 수있는 코드를 업데이트하면

<!-- Product Slider w/ Video --> 
    <div id="product-flexslider" class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}"> 
    <ul class="slides"> 
     {% for image in product.images %} 
     <li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}"> 
     {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %} 
     {% assign src = image.alt | split: 'src="' %} 
     {% assign src = src[1] | split: '"' | first %} 

     {% if src contains '?' %} 
     {% assign src = src | append: '&amp;autoplay=1' %} 
     {% else %} 
     {% assign src = src | append: '?autoplay=1' %} 
     {% endif %} 

     <div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}"> 
      <div> 
      <a href="{{ src }}" title="{{ product.title | escape }}"> 
       {{ image.alt }} 
      </a> 
      </div> 
     </div> 
     {% else %} 
     <a href="{{ image | product_img_url: 'master' }}" title="{{ image.alt | escape }}"> 
      <img src="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"/> 
     </a> 
     {% endif %} 
     </li> 
     {% endfor %} 
    </ul> 
    </div> 

    <!-- Carousel --> 

    <div id="product-carousel" class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}"> 
    <ul class="slides"> 
     {% for image in product.images %} 
     <li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}"> 

     <a href="{{ image | product_img_url: 'master' }}" title="{{ image.alt | escape }}"> 
      <img src="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" /> 
     </a> 
     </li> 
     {% endfor %} 
    </ul> 
    </div> 
    <!-- End Slider --> 

<!-- FlexSlider --> 

{{ 'jquery.flexslider-min.js' | asset_url | script_tag }} 
{{ 'flexslider.css' | asset_url | stylesheet_tag }} 


<script type="text/javascript" charset="utf-8"> 
(function($) { 
    $(window).load(function(){ 
    $('#product-carousel').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    itemWidth: 41, 
    itemMargin: 5, 
    asNavFor: '#product-flexslider' 
    }); 
    $('#product-flexslider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    sync: "#product-carousel" 
    }); 
}); 
})(jQuery); 

</script> 

.

FlexSlider 속성은 여기에 있습니다 : https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

솔루션은 또 다른 문제에 관한 한 여기에 우편으로 도움이되었다 https://ecommerce.shopify.com/c/ecommerce-discussion/t/issue-with-variable-image-444159