主页 / 问题 / 812067
Accepted
kizoso
Asked:2020-04-10 17:22:35 +0000 UTC2020-04-10 17:22:35 +0000 UTC

如何在双击时调用fancybox并在单击时禁用？

  • 772

有一个带有照片的 OwlCarousel，双击它时应该会打开fancybox画廊。
事实是，默认情况下，只需单击一下即可打开图库。
有时甚至只是试图滑动轮播会打开一个模式窗口，这不应该是。
想禁止一键打开fansibox，双一听。
我可以取消第一次单击，发生双击，但未检测到 fancibox ..：

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

javascript

1 个回答

  1. Best Answer

    添加了一个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;
}
    <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-->

    • 3

相关问题