要在jQuery FancyBox中绑定事件,您可以使用on()
方法。以下是一些示例,说明如何在FancyBox中绑定事件:
- 在图片点击时打开FancyBox并触发
afterShow
事件:
$('a[href$=".jpg"]').fancybox({ afterShow: function () { console.log('Image clicked, FancyBox opened.'); }, });
- 为FancyBox中的标题绑定
click
事件:
$('a[href$=".jpg"]').fancybox({ afterShow: function (instance, slide) { // 获取FancyBox标题元素 var title = $('.fancybox-title'); // 为标题元素绑定click事件 title.on('click', function () { console.log('Title clicked.'); }); }, });
- 在点击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 () { // 在这里放置上述事件绑定代码 });