jQuery FancyBox 是一種流行的 JavaScript 庫,用于在網頁上顯示類似彈窗的內容。它允許您輕松地為圖片、視頻、HTML 內容等創建美觀的浮動窗口。FancyBox 使用 CSS3 和 JavaScript 實現,提供了許多自定義選項和交互功能。
以下是 FancyBox 的基本工作方式:
<head>
標簽中添加以下代碼來實現:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
fancybox
),以便 FancyBox 知道何時激活。例如:<a href="large-image.jpg" class="fancybox">查看圖片</a>
$
選擇器(代表 jQuery)初始化 FancyBox。例如:$(document).ready(function() {
$('.fancybox').fancybox();
});
現在,當用戶點擊具有 fancybox
類的鏈接時,FancyBox 應該會顯示一個包含指定內容的浮動窗口。
FancyBox 提供了許多其他功能和選項,如自動播放視頻、響應式設計、導航按鈕等。您可以在 FancyBox 的官方文檔中了解更多詳細信息:https://fancyapps.com/fancybox/3/