fancybox 使用方法


項目中需要做一個相冊功能。選擇的是fancybox,大概記錄一下使用方法:

1.引用fancybox所需要的文件,你可以下載至本地或者引用CDN。

fancybox最新版本下載地址:http://fancyapps.com/fancybox/3/

CDN引用地址:

<link href="https://cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.js"></script>

 

2.編寫相冊所需的HMTL代碼:

我這里是需要創建相冊,所以同一個相冊的data-fancybox的名字需保持一致。

 

注意:老版本是用rel,現在已經不支持了。我開始用的是新版本的,看的是老版本的文檔,用rel沒效果。這種低級錯誤,大家就不要再犯了。 

官方文檔截圖:

更詳細的參數可訪問:http://fancyapps.com/fancybox/3/docs/#usage

 

3.通過JS引用fancybox:

$(".js_gallery_evaluate").fancybox();

 

切記,看文檔一定要跟你使用的版本對上號!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM