Fancybox открытие галереи со второй картинки?

Question

[Кирилл Кузьминых]

Есть галерея на Fancybox, как сделать чтоб когда открывается галерея, просмотр был всегда с второй картинки, а первая чтоб всегда была display: none. Галерею я переделал основная картинка и нижние превью связаны JS при клике на превью на место главной картинки подтягивается увеличенная превью. но когда заходишь в саму галерею, первые 2 картинки которые идут первой и второй задублировались, т.к. на них изображено одно и тоже но по сути это разные картинки



Как сделать чтобы при заходе в саму галерею, первой Основной картинки 1/8 вообще не было, а галерея начиналась с 2/8. Скрываю CSS , у меня пропадает картинка на основной страничке товара.

<div class="container-gallery">
   <div class="flex flex-wrap gap-5 justify-center max-w-5xl mx-auto px-6">
        <h2 class="accordion-title-1">«Виртон винтерберг 1» тумба ТВ</h2>
        <div class="gallery-img-one">
             <a data-fancybox="gallery" href="/pages/catalog/ALL/virton-winter1/0b.webp">
                    <img class="main-img" width="800" src="/pages/catalog/ALL/virton-winter1/0b.webp" alt="..." />
             </a>
        </div>
   </div>

   <div class="gallery-img-two">
        <div class="flex flex-wrap gap-5 justify-center max-w-5xl mx-auto px-6">
             <div class="flex-gallery-row">
                  <a style="display: none" data-fancybox="gallery" href="/pages/catalog/ALL/virton-winter1/0b.webp">
                            <img class="img-border" data-fancybox="images" width="110" src="/pages/catalog/ALL/virton-winter1/0s.webp" alt="..." />
                   </a>
                <img class="img-border"  width="110" src="/pages/catalog/ALL/virton-winter1/0s.webp" alt="..." />

                <a style="display: none" data-fancybox="gallery" href="/pages/catalog/ALL/virton-winter1/1b.webp">
                     <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/1s.webp" alt="..." />
                </a>
                <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/1s.webp" alt="..." />

                 <a style="display: none" data-fancybox="gallery" href="/pages/catalog/ALL/virton-winter1/2b.webp">
                       <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/2s.webp" alt="..." />
                 </a>
               <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/2s.webp" alt="..." />

               <a style="display: none" data-fancybox="gallery" href="/pages/catalog/ALL/virton-winter1/3b.webp">
                     <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/3s.webp" alt="..." />
               </a>
               <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/3s.webp" alt="..." />

               <a style="display: none" data-fancybox="gallery" href="/pages/catalog/ALL/virton-winter1/4b.webp">
                    <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/4s.webp" alt="..." />
               </a>
                    <img class="img-border" width="110" src="/pages/catalog/ALL/virton-winter1/4s.webp" alt="..." />

               <a data-fancybox="gallery" href="https://youtu.be/hRUO7jyvwMw">
                   <img class="img-border" width="110" src="/img/prezent.webp" alt="..." />
               </a>

               <a data-fancybox="gallery" href="https://youtu.be/uYoDSgrP_fQ">
                    <img class="img-border" width="110" src="/img/sborka.webp" alt="..." />
               </a>
               </div>
            </div>
         </div>
       </div>

JS стандартный

Fancybox.bind('[data-fancybox="gallery"]', {
        animated: true,
        showClass: false,
        hideClass: false,

        click: true,

        dragToClose: true,

        Image: {
                zoom: true,
        },

        Toolbar: {
                display: [{ id: "counter", position: "center" }, "close"],
        },
});

Вот так я реализовал что при нажатии на нижнюю линию превью картинок, цикл перебирает файлы в папке с картинками и подменяет в имени файла букву "s" на "b" 1s.webp - это у меня превью, а 1b.webp - это большая картинка, тем самым при нажатии на превью картинку они меняются на главной:

function imageGallery() {
	const highlight = document.querySelector('.gallery-img-one img');
	const preview = document.querySelectorAll(".gallery-img-two img");
	preview.forEach(preview => {
		preview.addEventListener('click', function () {
			const smallSrc = this.src;
			const bigSrc = smallSrc.replace('s.webp', 'b.webp');
			highlight.src = bigSrc;
			console.log(smallSrc);
		});
	});
}
imageGallery()

Answer 1

[maksam07]

А зачем через css скрывать?
Превью - первая картинка
Миниатюры - со второй и до конца

Comments

[Кирилл Кузьминых]

Заказчик так хочет, чтобы была первая картинка, и в миниатюрах стояла эта же картинка первой. По итогу получилось 2 одинаковые картинки при открытии полноценной галереи. вот и надо чтобы галерея при полноценном открытии отрывалась всегда со 2 картинки, а первую картинку всегда пропускала.

[maksam07]

Кирилл Кузьминых, в теории, можно попробовать все картинки, кроме первой миниатюры, добавить в группу изображений.
По-моему к изображению нужно добавить атрибут: data-fancybox="gallery-1"
Но лучше посмотреть в апи

[Кирилл Кузьминых]

maksam07, попробую посмотреть в эту сторону, спасибо за наводку.