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();

 

切記，看文檔必定要跟你使用的版本對上號！！！