Есть OwlCarousel с фотографиями, при нажатии на которые по двойному клику должна открываться галерея fancybox
Дело в том, что галерея открывается по умолчанию по одинарному клику.
А иногда даже просто при попытке сделать свайп карусели открывается модальное окно, а этого не должно быть.
Хочу запретить открывать фансибокс по одинарному клику, и слушать двойной.
Могу отменить первый клик, двойной происходит, но фансибокс не определяется..:
function init() {
initFancybox();
initGallerySlider();
}
window.onload = init;
function initGallerySlider() {
$('.gallery').owlCarousel({
loop: true,
margin: 0,
autoWidth: true
});
}
function initFancybox() {
$(document).on('fancybox.init', '.fancybox', function() {
var
defaults = {
maxWidth: 994,
autoResize: true,
padding: 0,
helpers: {
media: {},
overlay: {}
}
},
$el = $(this),
group = $el.attr('data-fancybox-group'),
options = eval('[' + $el.data('fancybox-options') + ']')[0];
if (group) $el = $('[data-fancybox-group="' + group + '"]');
$.extend(defaults, options);
$el.fancybox(defaults);
});
$('.fancybox').trigger('fancybox.init');
}
$('[data-fancybox="gallery"]').click(function(e) {
e.preventDefault();
});
$('[data-fancybox="gallery"]').dblclick(function() {
$(this).fancybox();
});
.gallery__item {
display: block;
height: 200px;
width: 200px;
background-size: cover;
}
Ответ
Добавил функцию prepairGallery(), которая собирает галерею и правильным образом запускает по двойному клику, отменяя клик одинарный.
function init() {
initFancybox();
initGallerySlider();
prepairGallery();
}
window.onload = init;
function initGallerySlider() {
$('.gallery').owlCarousel({
loop: true,
margin: 0,
autoWidth: true
});
}
function initFancybox() {
$(document).on('fancybox.init', '.fancybox', function() {
var
defaults = {
maxWidth: 994,
autoResize: true,
padding: 0,
helpers: {
media: {},
overlay: {}
}
},
$el = $(this),
group = $el.attr('data-fancybox-group'),
options = eval('[' + $el.data('fancybox-options') + ']')[0];
if (group) $el = $('[data-fancybox-group="' + group + '"]');
$.extend(defaults, options);
$el.fancybox(defaults);
});
$('.fancybox').trigger('fancybox.init');
}
var gallery = [];
function prepairGallery() {
$(".gallery__item").each(function(i) {
/* собираем галерею */
gallery.push({
src: this.href
});
$(this).on({
/* отменяем одинарный клик */
click: function(event) {
event.preventDefault();
},
/* подключаем двойной клик */
dblclick: function(event) {
/* открываем собранную галерею на заданном индексе */
$.fancybox.open(gallery, {padding: 0}, i);
}
});
});
}
.gallery__item {
display: block;
height: 200px;
width: 200px;
background-size: cover;
}
Комментариев нет:
Отправить комментарий