要選擇 jQuery FancyBox,請按照以下步驟操作:
<head>
部分添加以下代碼:<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 FancyBox CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<!-- 引入 FancyBox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
fancybox
):<a href="large-image.jpg" data-fancybox="gallery" class="fancybox">
<img src="small-image.jpg" alt="" />
</a>
在這個例子中,我們使用了 data-fancybox
屬性來指定 FancyBox 的配置,以及 gallery
值來表示這是一個圖片畫廊。
$(document).ready()
函數內):$(document).ready(function() {
$('.fancybox').fancybox();
});
這將使得所有具有 fancybox
類的元素都能使用 FancyBox 進行顯示。
現在您已經成功選擇了 jQuery FancyBox。點擊帶有 fancybox
類的鏈接或圖片,它們將以 FancyBox 形式打開。