jQuery FancyBox如何进行事件绑定

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

1. 在图片点击时打开FancyBox并触发afterShow事件：

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

2. 为FancyBox中的标题绑定click事件：

$('a[href$=".jpg"]').fancybox({
  afterShow: function (instance, slide) {
    // 获取FancyBox标题元素
    var title = $('.fancybox-title');

    // 为标题元素绑定click事件
    title.on('click', function () {
      console.log('Title clicked.');
    });
  },
});

3. 在点击FancyBox外部时关闭FancyBox并触发beforeClose事件：

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

// 点击页面任意位置关闭FancyBox
$(document).on('click', function (e) {
  if (!$(e.target).closest('.fancybox-container').length) {
    $('.fancybox-close').click();
  }
});

请注意，为了确保事件正确绑定，您需要在文档加载完成后执行这些代码。您可以将这些代码放在$(document).ready()函数中，如下所示：

$(document).ready(function () {
  // 在这里放置上述事件绑定代码
});