Как вызвать fancybox по двойному клику и запретить по одинарному?

235
11 апреля 2018, 05:49

Есть 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-->

Answer 1

Комментарии в коде

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

READ ALSO
Изменить положение блока slick slider

Изменить положение блока slick slider

Доброго дня! Имеется карточка товара:

221
AdminLTE путь нахождения шаблона входа

AdminLTE путь нахождения шаблона входа

Подскажите, где находится шаблон страницы авторизации пользователей в системе?

200
Как зарегистрировать JavaConfig в web.xml

Как зарегистрировать JavaConfig в web.xml

Без использования SpringMvc

248
Обьекты и ссылки в Java

Обьекты и ссылки в Java

Описание: При удалении из cacheMatrix, объекты удаляются отовсюду(из matrix)

249