Здравствуйте. Сделал вроде как все по инструкции. Однако что-то не так. У меня в карточке товара теперь появляются две миниатюры одного и того же видео. В начале и в конце. Между миниатюрами фотографий. Причем последняя миниатюра видео не кликабельная, хотя подсвечивается рамкой как дефолтная. Как сделать чтобы миниатюра видео была одна?

https://747.kz/priglasitelnyy-na-yz-zatu-lunnyy-svet/

Сам код

<h4>product.image.html </h4>

{if method_exists($product, 'getVideo')}
<style>
.video-container {
text-align: center;
padding: 4px;
border: 1px solid #e5e5e5;
}
.video-container iframe {
max-width: 100%;
}
</style>
{$video = $product->getVideo(['96x96'])}
{/if}

{if !empty($theme_settings.shopSidebarProduct)}
{$_img_size = '300x0'}
{$_count_img = 4}
{else}
{$_img_size = '500x0'}
{$_count_img = 5}
<style type="text/css">
.image.general{
min-width:500px;
}
.image.general img {
max-width: 500px;
}
#product-gallery .jcarousel-container {
width: 510px;
}
#product-gallery .jcarousel-clip-horizontal {
width: 450px;
}
@media only screen and (max-width: 1000px) and (min-width: 320px) {
.image.general{
min-width:300px;
}
.image.general img {
max-width: 300px;
}
#product-gallery .jcarousel-container {
width: 310px;
}
#product-gallery .jcarousel-clip-horizontal {
width: 266px;
}
}
</style>
{/if}
{if isset($product.params.gallery)}{$gallery = $product.params.gallery}{/if}
{if $wa->isMobile()}
{$gallery_type = 2}
{else}
{if $gallery == 'popup'}{$gallery_type = 2}{elseif $gallery == 'combi'}{$gallery_type = 3}{else}{$gallery_type = 1}{/if}
{/if}
{if $gallery_type == 2 || $gallery_type == 3}
<link rel="stylesheet" href="{$wa_theme_url}jquery.fancybox.css?v{$wa_theme_version}" type="text/css" media="screen" />

<script type="text/javascript" src="{$wa_theme_url}jquery.fancybox.pack.js?v2.1.5"></script>
<script type="text/javascript" src="{$wa_theme_url}jquery.fancybox-buttons.js?v1.0.5"></script>
{/if}
{if $gallery_type == 1 || $gallery_type == 3}
<script type="text/javascript" src="{$wa_theme_url}jquery.elevateZoom.min.js?v3.0.8"></script>
{/if}
<!-- image gallery -->
<div class="align-center">
{if !empty($video.url)}

<div itemprop="embedHTML">
<iframe src="{$video.url}" width="{$video.width}" height="{$video.height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<meta itemprop="width" content="{$video.width}">
<meta itemprop="height" content="{$video.height}">
</div>
{/if}

<!-- main image -->
<div class="image general">
{if $product.images}
<div class="corner bottom left">
{$wa->shop->badgeHtml($product.badge)}
</div>
{*fix sku image*}
{if $product.skus[$product.sku_id].image_id}
{$product.image_id = $product.skus[$product.sku_id].image_id}
{$product.ext = $product.images[$product.image_id].ext}
{/if}
{*/fix sku image*}
{/if}
{$ImgUrl = $wa->shop->productImgUrl($product, '970x0')}
{if $product.images}<a href="{$ImgUrl}" target="_blank">{/if}
{$wa->shop->productImgHtml($product, $_img_size, [ 'itemprop' => 'image', 'id' => 'product-image', 'data-zoom-image' => $ImgUrl, 'alt' => $product.name|escape|cat:' ':strip_tags($product.summary)|escape, 'default' => "`$wa_theme_url`img/dummy200.png" ])}
{if $product.images}</a>{/if}
</div>

<!-- gallery -->
{if count($product.images) > 1 || (count($product.images) === 1 && !empty($video.url))}
<div class="gallery" id="product-gallery">
{if count($product.images) < $_count_img}<style type="text/css">.gallery .jcarousel-prev, .gallery .jcarousel-next{ visibility:hidden; }</style>{/if}
<ul>
{if !empty($video.url)}
<li class="product-image-thumbs">
<a id="product-image-video" href="{$video.url}">
<img src="{$video.images[0]}" alt="">
</a>
</li>
{/if}
{foreach $product.images as $image}
<li class="product-image-thumbs">
<a id="product-image-{$image.id}"
class="gallery-data{if $image.url_crop|replace:'96x96':'970x0' == $ImgUrl} thumbActive{/if}"
href="javascript:void(0);"
data-zoom-image="{$wa->shop->imgUrl($image, '970x0')}"
data-image="{$wa->shop->imgUrl($image, $_img_size)}"
>
{$wa->shop->imgHtml($image, '96x96', ['alt' => $image.description|escape])}
</a>
</li>
{/foreach}
{if !empty($video.url)}
<li class="product-image-thumbs">
<a id="product-image-video" href="{$video.url}" class="thumbActive">
<img src="{$video.images[0]}" alt="">
</a>
</li>
{/if}
</ul>
</div>
{/if}

<script type="text/javascript">
$('#product-gallery ul').jcarousel({
scroll: 1,
buttonNextHTML: '<div><i class="icon-caret-right"></i></div>',
buttonPrevHTML: '<div><i class="icon-caret-left"></i></div>'
});

{if $gallery_type == 1 || $gallery_type == 3}
/*zoom*/
$('#product-image').elevateZoom({
preloading: 0,
zoomType: "window",
cursor: "crosshair",
/*loadingIcon: "{$wa_static_url}wa-content/img/loading16.gif",*/
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750,
gallery : "product-gallery",
galleryActiveClass: "thumbActive",
zoomWindowWidth:400,
borderSize: 1,
borderColour: '#e5e5e5',
/* uncoment in use tint
tint: true,
tintColour: '#f5f5f5',
tintOpacity: 0.5,
*/
lensOpacity: 0.7,
scrollZoom: true,
constrainType: 'width'
});
var resize_zoom = null;
$(window).on('resize.zoom', function(){
if (resize_zoom) {
clearTimeout(resize_zoom);
}
resize_zoom = setTimeout(function(){
$('.zoomContainer').remove();
$('#product-image').data('elevateZoom').refresh(1);
}, 100);
});
{/if}

{if $gallery_type == 1}
$('#product-image').bind("click", function(e) { return false; });{*comment this line use open big image a new window*}
{/if}

{if $gallery_type == 2}
/*popup*/
$("#product-image").bind("click", function(e) {
{if count($product.images) > 1}
var gallerylist = [];
$('#product-gallery a').each(function(){
if($(this).attr('id') == 'product-image-video') {
return true;
}
if($(this).hasClass('thumbActive')){
gallerylist.unshift({
href: ''+$(this).data('zoom-image')+'',
title: $(this).find('img').attr("title")
});
}else{
gallerylist.push({
href: ''+$(this).data('zoom-image')+'',
title: $(this).find('img').attr("title")
});
}
});
$.fancybox(gallerylist, {
{else}
$.fancybox({ href: $(this).data('zoom-image'), title: $(this).attr('title') }, {
{/if}
prevEffect : 'none',
nextEffect : 'none',
loop : false,
helpers : {
title : {
type : 'outside'
},
buttons : {
position:'bottom'
}
}
});

return false;
});
{/if}

{if $gallery_type == 3}
/*combi*/
$("#product-image").bind("click", function(e) {
{if count($product.images) > 1}
var ez = $(this).data('elevateZoom');
$.fancybox(ez.getGalleryList(), {
{else}
$.fancybox({ href: $(this).data('zoom-image'), title: $(this).attr('title') }, {
{/if}
prevEffect : 'none',
nextEffect : 'none',
loop : false,
helpers : {
title : {
type : 'outside'
},
buttons : {
position:'bottom'
}
}
});

return false;
});
{/if}
</script>
</div>