There is an OwlCarousel with photos, when clicked, double-clicking should open the fancybox gallery.
The fact is that the gallery opens by default by a single click.
And sometimes even just when you try to make a roundabout swipe, a modal window opens, but this should not be.
I want to prohibit opening a single-click fan box and listening to a double one.
I can cancel the first click, double occurs, but the fanbox is not detected ..:

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-->

  • look at this answer - stackoverflow.com/questions/26193531/… - soledar10
  • @ soledar10 unfortunately does not work, this option also tried, I get - *.fancybox is not a function - kizoso
  • 3
    @kizoso, I also can not figure it out ... While picking ... - Air
  • and where in the code at least one element with the fancybox class? - Grundy
  • @Grundy is a minimal reproducible example. On the page besides the gallery, the fanboxbox is used in other places, in this case it works in a different selector. But just in case all the js associated with it decided to write. - kizoso

1 answer 1

Added the prepairGallery() function, which prepairGallery() gallery and correctly launches a double click, canceling a single click.

 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-->

  • What has changed? - Grundy
  • The markup? ...... - user207618
  • @Grundy prepairGallery() function - Dmitry Polyanin
  • @Other added description in reply - Dmitry Polyanin