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

#javascript #html #jquery #fancybox #owl_carousel

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










  

    

      

        
        
        
        
        
      
      
    
    
  
  





    

Ответы

Ответ 1

Добавил функцию 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;
}