На сайте товары выводятся через minishop2 и изображения товаров соответственно через msgallery.
Msgallery работает с помощью стиля fotorama.
Примерно так:
<div class="fotorama w-100"
data-nav="thumbs"
data-width="100%"
data-maxwidth="800px"
data-thumbwidth="85"
data-thumbheight="85"
data-allowfullscreen="true"
data-swipe="true"
data-autoplay="5000">
<a href="/assets/images/products/image.jpg" target="_blank">
<img src="/assets/cache_image/products/308/image.jpg" alt="">
</a>
<a href="/assets/images/products/308/image1.jpg" target="_blank">
<img src="/assets/cache_image/products/308/image1.jpg" alt="">
</a>
<a href="/assets/images/products/308/image2.jpg" target="_blank">
<img src="/assets/cache_image/products/308/image2.jpg" alt="">
</a>
<a href="/assets/images/products/308/image3.jpg" target="_blank">
<img src="/assets/cache_image/products/308/image3.jpg" alt="">
</a>
<a href="/assets/images/products/308/image4" target="_blank">
<img src="/assets/cache_image/products/308/image4.jpeg" alt="">
</a>
<a href="/assets/images/products/308image5" target="_blank">
<img src="/assets/cache_image/products/308/image5.jpeg" alt="">
</a>
<a href="/assets/images/products/308/image6" target="_blank">
<img src="/assets/cache_image/products/308/image6.jpeg" alt="">
</a>
</div>
Необходимо следующее. Сделать первый кадр изображения чтобы на него в миниатюре наносился значок проигрывателя при клике на который открывался попап с видео, а не изображением. Все остальные кадры должны работать как и раньше - открываться в виде картинок.
Пример
https://xistore.by/catalog/dlya_kukhni/vspenivatel...
Как это лучше реализовать на сайте? Поставить к коду первого кадра некий класс (типа
<img src="/assets/cache_image/products/308/image.jpg" alt="" class="popup-video">
) чтобы его потом подхватывал js, накладывал картинку проигрывателя и при клике осуществлял попап с видео?
Если да, то как лучше этот класс прикрепить именно к первому кадру?
Другими средствами? Какими? Править фотораму? Что именно править?
Это чанк самой Галереи
<div id="msGallery">
<!-- <img src="doc/images/10.png" class="iconn icon_1" alt="гарантия 10 лет">
<img src="doc/images/25.png" alt="гарантия 25 лет" class="iconn icon_1">
<img src="doc/images/bufa.png" alt="bufa" class="iconn2 icon_2">-->
{if $files?}
<div class="fotorama w-100"
data-nav="thumbs"
data-width="100%"
data-maxwidth="800px"
data-thumbwidth="85"
data-thumbheight="85"
data-allowfullscreen="true"
data-swipe="true"
data-autoplay="5000">
{foreach $files as $file}
<a href="{$file['url']}" target="_blank">
<img src="{$file['url'] | phpthumbon : 'w=100&h=100&zc=1'}" alt="[[*pagetitle]]">
</a>
{/foreach}
</div>
{else}
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium@2x.png'} 2x"
alt="" title=""/>
{/if}
</div>
