要維護jQuery FancyBox,您可以遵循以下步驟:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
標簽中,使用以下代碼初始化FancyBox:$(document).ready(function() {
$('[data-fancybox]').fancybox();
});
這將自動為所有帶有data-fancybox
屬性的元素創建FancyBox效果。
內容管理:為您的FancyBox添加內容,可以使用以下兩種方法:
通過HTML標簽直接添加內容:
<a href="large-image.jpg" data-fancybox="gallery" data-caption="My caption">
<img src="small-image.jpg" alt="" />
</a>
通過JavaScript動態添加內容:
$('<a>').attr({
href: 'large-image.jpg',
'data-fancybox': 'gallery',
'data-caption': 'My caption'
}).append('<img src="small-image.jpg" alt="" />').appendTo('#gallery');
關閉FancyBox:要關閉當前打開的FancyBox,可以使用$.fancybox.close()
方法。例如,您可以將其綁定到一個按鈕:
<button id="close-fancybox">關閉FancyBox</button>
$('#close-fancybox').on('click', function() {
$.fancybox.close();
});
$(document).ready(function() {
$('[data-fancybox]').fancybox({
buttons: [
'close',
'share',
'fullScreen',
'download',
'thumbs',
'close'
],
loop: true,
margin: [20, 20, 20, 20],
padding: 0,
imageScale: false,
imageSrc: '',
center: false,
autoFocus: true,
autoCenter: true,
clickOutside: false,
escapeKey: false,
touchClick: false,
keypress: false,
beforeLoad: function(instance, slide, current) {
// 在加載之前執行此函數
},
afterClose: function(instance, slide) {
// 在關閉之后執行此函數
}
});
});
通過遵循這些步驟,您可以確保jQuery FancyBox在您的項目中正常運行并易于維護。