jQuery FancyBox 是一種用于創建響應式、觸摸友好的圖像和內容彈出窗口的插件。以下是一個簡單的代碼示例,展示了如何使用 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>
<a href="https://example.com/path/to/your/image.jpg" data-fancybox="gallery" class="fancybox">
<img src="https://example.com/path/to/your/thumbnail.jpg" alt="" />
</a>
在這個例子中,我們使用了 data-fancybox
屬性來指定要打開的圖像集合,并使用了 gallery
值。class="fancybox"
是可選的,但推薦使用,以便可以通過 CSS 為 FancyBox 添加樣式。
fancybox
類的元素時,FancyBox 應該會自動打開并顯示關聯的圖像。您還可以使用 JavaScript 初始化 FancyBox,如下所示:$(document).ready(function() {
$('.fancybox').fancybox();
});
這將確保在頁面加載完成后,FancyBox 會被應用到所有具有 fancybox
類的元素上。
這就是一個簡單的 jQuery FancyBox 示例。您可以在官方網站上找到更多關于 FancyBox 的信息和選項,以便根據您的需求進行定制。