В чем может быть причина отключения thumbs при связи fancybox и slick?

Question

[Destell]

Пытаюсь использовать fancybox для вывода изображений из slick slider. Т.к. для прокрутки слайдов slick создает копии блоков, в thumbs вылезали дубликаты изображений из копий. Эту проблему пытался решить двумя способами.

Первый - использовать fade: true в настройках slick
Второй - при инициализации слайдера перезаписывать категории изображений для галереи

spoiler

_sliderNav.on('init', function(event, slick){
			var line = slick.$slideTrack,
				slides = line.find('[data-slick-index]');

			slides.each(function () {
				var _this = $(this),
					fancyId = _this.find('[data-fancybox]'),
					index = _this.index();

				fancyId.attr('data-fancybox', 'cert' + index);
			});
		});

В любом случае thumbs перестают инициализироваться, пропадает кнопка вызова thumbs и события на ней. В чем может быть причина?

Answer 1

[tyzberd]

В любом случае thumbs перестают инициализироваться, пропадает кнопка вызова thumbs и события на ней. В чем может быть причина?

вы добавляете index в data-fancybox, а должно быть везде одинаково, тогда они будут в группе

я делал с owl, но принцип тот же.

html отдельного слайда

<div class="item" data-index="2">
                <a href="/data/himg/booking1395_1.jpg" data-fancybox="images-tour"><img
                        class="owl-lazy" width="932" height="619" src=""
                        data-src="/data/himg/booking1395_1.jpg"
                        alt=""></a>
            </div>

с этого нужно data-index (начинаем с 1), что бы искать нужный слайд и data-fancybox что бы работало открытие при переходе по ссылке.

скрипт

var owl = $('.slider'); //слайдер еще без клонов
$links = owl.find('a'); // ссылки. Тут не должно быть клонированных ссылок

/*
    'click.fb-start' нашел полазив в плагине.
    При переходе по ссылке с hash, скрипт находит дата атрибут с названием как в хеш, и тригает на нем это событие
    
    '.item a' для того, что бы клик нормально работал и на клонах. 
*/
owl.on('click.fb-start', '.item a', function (e) {
    e.preventDefault();
    var index = $(this).parent('.item').data('index'); 
    $.fancybox.open($links, {
        arrows: true,
        toolbar: true,
        loop: true,
        buttons: [
            "slideShow",
            "fullScreen",
            "thumbs",
            "close"
        ],
        hash: 'images-tour' // хеш такой как в дата атрибуте
    }, index); // по этому индексу в $links будет найдена ссылка
});

когда делал с owl, ссылки я получал после инициализации карусели через api.
в слик можно получить так

var $links = $(".Modern-Slider").slick('getSlick').$slides.find('a');

Comments

[Destell]

Накидал пример

Попробовал сделать по вашему варианту (закомментировал), вышло что-то не то, возможно, где-то косяк.
Остальной код - то, как я пытался сделать изначально, только, почему-то, на кодпен работает иначе, чем на живую - индекс неправильно заносится в дата-фэнси.
Нюанс в том, что каждый слайд слика содержит в себе свою группу слайдов для фэнсибокс, т.е. групп изображений несколько, потому я и заносил индекс в дата-фэнси.

И можно увидеть, что если оставить стандартные настройки плагинов, то при нативном сликовском fade true так же перестают работать thumbs

[tyzberd]

можно сделать так https://codepen.io/tyzberd/pen/VEBxNV/
и в каждой ссылке img
второй вариант прописать у ссылки
data-options='{"thumb" : "https://static...."}'

[Destell]

tyzberd, спасибо. Я правильно понял, что вызов фэнси из блоков-дубликатов, грубо говоря, переходит на контент основных слайдов?

[tyzberd]

да