Есть 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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="gallery owl-carousel">
<a href="https://i0.wallpaperscraft.com/image/usa_california_san_francisco_night_panorama_69288_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(https://i0.wallpaperscraft.com/image/usa_california_san_francisco_night_panorama_69288_300x300.jpg);"></a>
<a href="http://i0.wallpaperscraft.ru/image/sirs-tauer_neboskrb_chikago_ssha_hdr_47960_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://i0.wallpaperscraft.ru/image/sirs-tauer_neboskrb_chikago_ssha_hdr_47960_300x300.jpg);"></a>
<a href="http://i0.wallpaperscraft.ru/image/ulica_karla_libknehta_panorama_ekaterinburg_rossiya_28661_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://i0.wallpaperscraft.ru/image/ulica_karla_libknehta_panorama_ekaterinburg_rossiya_28661_300x300.jpg);"></a>
<a href="https://weatherbyhealthcare.scdn5.secure.raxcdn.com/blog/wp-content/uploads/2015/03/pennsylvania_destination_300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(https://weatherbyhealthcare.scdn5.secure.raxcdn.com/blog/wp-content/uploads/2015/03/pennsylvania_destination_300.jpg);"></a>
<a href="http://2015.ctbuh.org/wp-content/uploads/2015/05/Chicago_sunrise_cDanielSchwen-300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://2015.ctbuh.org/wp-content/uploads/2015/05/Chicago_sunrise_cDanielSchwen-300x300.jpg);"></a>
</div>
<!--.gallery.owl-carousel-->
</div>
<!--col-->
</div>
<!--.row-->
</div>
<!--.container-->
Комментарии в коде
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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="gallery owl-carousel">
<a href="https://i0.wallpaperscraft.com/image/usa_california_san_francisco_night_panorama_69288_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(https://i0.wallpaperscraft.com/image/usa_california_san_francisco_night_panorama_69288_300x300.jpg);"></a>
<a href="http://i0.wallpaperscraft.ru/image/sirs-tauer_neboskrb_chikago_ssha_hdr_47960_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://i0.wallpaperscraft.ru/image/sirs-tauer_neboskrb_chikago_ssha_hdr_47960_300x300.jpg);"></a>
<a href="http://i0.wallpaperscraft.ru/image/ulica_karla_libknehta_panorama_ekaterinburg_rossiya_28661_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://i0.wallpaperscraft.ru/image/ulica_karla_libknehta_panorama_ekaterinburg_rossiya_28661_300x300.jpg);"></a>
<a href="https://weatherbyhealthcare.scdn5.secure.raxcdn.com/blog/wp-content/uploads/2015/03/pennsylvania_destination_300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(https://weatherbyhealthcare.scdn5.secure.raxcdn.com/blog/wp-content/uploads/2015/03/pennsylvania_destination_300.jpg);"></a>
<a href="http://2015.ctbuh.org/wp-content/uploads/2015/05/Chicago_sunrise_cDanielSchwen-300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://2015.ctbuh.org/wp-content/uploads/2015/05/Chicago_sunrise_cDanielSchwen-300x300.jpg);"></a>
</div>
<!--.gallery.owl-carousel-->
</div>
<!--col-->
</div>
<!--.row-->
</div>
<!--.container-->
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Подскажите, где находится шаблон страницы авторизации пользователей в системе?
Описание: При удалении из cacheMatrix, объекты удаляются отовсюду(из matrix)