jQuery FancyBox如何進(jìn)行事件綁定

要在jQuery FancyBox中綁定事件，您可以使用on()方法。以下是一些示例，說明如何在FancyBox中綁定事件：

1. 在圖片點(diǎn)擊時打開FancyBox并觸發(fā)afterShow事件：

$('a[href$=".jpg"]').fancybox({
  afterShow: function () {
    console.log('Image clicked, FancyBox opened.');
  },
});

2. 為FancyBox中的標(biāo)題綁定click事件：

$('a[href$=".jpg"]').fancybox({
  afterShow: function (instance, slide) {
    // 獲取FancyBox標(biāo)題元素
    var title = $('.fancybox-title');

    // 為標(biāo)題元素綁定click事件
    title.on('click', function () {
      console.log('Title clicked.');
    });
  },
});

3. 在點(diǎn)擊FancyBox外部時關(guān)閉FancyBox并觸發(fā)beforeClose事件：

$('a[href$=".jpg"]').fancybox({
  beforeClose: function (instance, slide) {
    console.log('FancyBox will close now.');
  },
});

// 點(diǎn)擊頁面任意位置關(guān)閉FancyBox
$(document).on('click', function (e) {
  if (!$(e.target).closest('.fancybox-container').length) {
    $('.fancybox-close').click();
  }
});

請注意，為了確保事件正確綁定，您需要在文檔加載完成后執(zhí)行這些代碼。您可以將這些代碼放在$(document).ready()函數(shù)中，如下所示：

$(document).ready(function () {
  // 在這里放置上述事件綁定代碼
});