jQuery.fancybox.js是一款非常流行的基于jQuery的lightbox插件,能夠非常方便地在網站內展示圖片、視頻和HTML內容。該插件具有輕量級、易于定制和響應式設計等優點,能夠滿足大多數用戶的需求。以下是該插件的下載方法和使用方法。
// 方法一:CDN引入 <link rel="stylesheet" /> <script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> // 方法二:本地下載 1. 訪問fancyBox的官網:https://fancyapps.com/fancybox/ 2. 點擊“Download fancyBox”按鈕,下載最新版本的zip文件; 3. 解壓zip文件,得到兩個文件夾: - dist 包含壓縮的js和css文件; - src 包含未壓縮的js和sass文件,適用于二次開發。 4. 將dist目錄中的jquery.fancybox.min.js和jquery.fancybox.min.css復制到你的項目中; // 使用方法 1. 在HTML文件中引入jquery.fancybox.min.css和jquery.fancybox.min.js文件; 2. 為需要使用lightbox的元素添加特定的class類名; 例: <!-- 圖片展示 --> <a class="fancybox" href="big_image.jpg"> <img src="thumb_image.jpg" alt="" /> </a> <!-- iframe展示 --> <a class="fancybox" data-src="http://example.com/" data-type="iframe"> <img src="thumb_image.jpg" alt="" /> </a> 3. 初始化fancybox插件 例: $(document).ready(function() { $(".fancybox").fancybox(); }); 4. 配置參數(可選) 例: $(document).ready(function() { $(".fancybox").fancybox({ buttons: [ "zoom", "share", "slideShow", "fullScreen", "download", "thumbs", "close" ], transitionEffect : "fade", transitionDuration: 800 }); });