Shopify网站上的产品滑块中的图像和视频
问题描述:
我需要一些帮助才能在Shopify中创建产品滑块,以便您添加图像和视频。目前滑块工作正常,但我遇到了将产品视频添加到滑块的问题。Shopify网站上的产品滑块中的图像和视频
从我已阅读的内容中,您可以使用alt标记添加将嵌入图像并显示视频的YouTube嵌入代码。我可以得到这个工作的第一个图像,但它有租赁打破滑块的其余部分。我相信我可能需要更改默认滑块并使用另一种替代方法。
这里是我迄今为止
$('#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&showinfo=0&controls=0&modestbranding=1&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>
我读了几个帖子,其中列出与开发商类似的问题试图添加产品视频,但我还没有遇到一个解决方案。
如果任何人都可以在这里帮助,将不胜感激。
谢谢
答
为什么使用javascript这个,当你可以使用简单的液体?
只需要为alt
属性添加检查,如果它包含youtube
或其他唯一的东西。
因此,例如:
{% if image.alt contains 'youtube' %}
<iframe width="500px" height="500px" src="{{image.alt}}?autoplay=1&showinfo=0&controls=0&modestbranding=1&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 %}
答
我只是想后我到达基于由“滴水”上述答案的解决方案。我希望这可以帮助其他人走上正轨。
<!-- 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: '&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>
一旦你已经更新了,你可以在使用图像作为缩略图占位符放置嵌入代码图像的ALT标签的代码。
FlexSlider特性可以在这里位于: https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties
该解决方案也被这里的帖子这是与另外一个问题帮助: https://ecommerce.shopify.com/c/ecommerce-discussion/t/issue-with-variable-image-444159
谢谢。我想我只是在想它是错误的。你的回答帮助我达到了我需要的解决方案。 – pedz