pro100taa
@pro100taa

Как в msgallery сделать отдельный стиль для первого слайда?

На сайте товары выводятся через 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>
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы