Destell
@Destell
Зеленый фронтендер

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

Пытаюсь использовать 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 и события на ней. В чем может быть причина?
  • Вопрос задан
  • 128 просмотров
Решения вопроса 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');
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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