【翻譯】fancyBox3 中文文檔
fancyBox3 中文文檔
譯文永久地址：kangkai124.github.io/fancybox/javascript
說明：本文檔僅供參考，更新不及時請查看官方文檔php
1. 介紹
fancyBox 是一個 JavaScript 庫，它以優雅的方式展現圖片，視頻和一些 html 內容。它包含你所指望的一切特性 —— 支持觸屏，響應式和高度自定義。css
1.1 依賴
推薦 jQuery 3+，可是 fancyBox 仍支持 jQery 1.9.1+ 和 jQuery 2+ 。html
注意java
若是你在圖片縮放時遇到了問題，請升級 jQuery 到最近版本（至少v3.2.1）。jquery
1.2 兼容
fancyBox 支持觸屏操做，並且支持縮放等手勢操做。在移動端和PC端上都十分合適。git
fancyBox 已經在下列瀏覽器中測試：github
- Chrome
- firefox
- IE10/11
- Edge
- IOS Safari
- Nexus 7 Chrome
2. 配置
能夠在 html 文檔中引入.css和.js來使用fancyBox，確保在這以前引入了 jQuery 庫。下面是使用fancyBox的一個基本的HTML模板：web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<!-- Your HTML content goes here -->
<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
複製代碼
注意ajax
- 要先引入jQuery
- 若是頁面中已經引入過jQuery，不能再次引入
- 不要同時引入
fancybox.js和fancybox.min.js- 一些方法（ajax，iframes 等）必須在一個web服務器上才能夠正常運行，在瀏覽器打開一個本地文件是沒法正常工做的
2.1 下載fancyBox
能夠在 GIthub 下載最新的版本。
或者直接引用 cdnjs —cdnjs.com/libraries/f…。
2.2 包管理工具
fancyBox 還能夠通多 npm 和 Bower安裝。
# NPM
npm install @fancyapps/fancybox --save
# Bower
bower install fancybox --save
複製代碼
3. 使用
3.1 使用 data 屬性初始化
最基本的用法是經過添加 data-fancybox 屬性到一個超連接標籤。標題能夠經過 data-capiton 添加。例如：
<a href="image.jpg" data-fancybox data-caption="My caption">
<img src="thumbnail.jpg" alt="" />
</a>
複製代碼
這種方式使用默認的配置，能夠查看選項進行自定義配置，或者使用data-options屬性。
3.2 使用 JavaScript 初始化
使用 jQuery 選擇器選擇一個元素，而後調用fancybox方法：
<script type="text/javascript">
$("[data-fancybox]").fancybox({
// Options will go here
});
</script>
複製代碼
使用這種方式，只有被選中的元素才能夠觸發點擊事件。
爲了能夠如今或以後存在的元素均可以觸發點擊事件，使用selector選項。例如：
$().fancybox({
selector : '[data-fancybox="images"]',
loop : true
});
複製代碼
3.3 手動調用 fancyBox
fancyBox 容許使用 JavaScrip t以任意形式觸發，所以沒必要須要經過某一個元素觸發。下面例子爲展現一段簡單的信息：
$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
複製代碼
經過 API 查看更多的信息和例子。
3.4 分組
若是你有一組元素，組內元素使用相同的 data-fancybox 值就能夠組成一個相冊。不一樣的組應該使用不一樣的屬性值加以區分。
<a href="image_1.jpg" data-fancybox="group" data-caption="Caption #1">
<img src="thumbnail_1.jpg" alt="" />
</a>
<a href="image_2.jpg" data-fancybox="group" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>
複製代碼
注意
fancyBox根據給定的url本身嘗試檢測內容的類型。若是沒法檢測，該類型可使用
data-type屬性手動添加。
<a href="images.php?id=123" data-type="image" data-caption="Caption">
Show image
</a>
複製代碼
4. 媒體類型
4.1 圖片
使用 fancyBox 的標準作法是用小尺寸的圖片連接到大尺寸圖片：
<a href="image.jpg" data-fancybox="images" data-caption="My caption">
<img src="thumbnail.jpg" alt="" />
</a>
複製代碼
默認狀況下，fancyBox 會在一張圖片展現前進行預加載。你能夠選擇當即顯示圖片，這樣當加載完成後會立刻渲染和顯示完整尺寸的圖片。不過，如下屬性是必須添加的：
data-width- 圖片的完整寬度data-height- 圖片的完整高度
<a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
<img src="thumbnail.jpg" />
</a>
複製代碼
fancyBox 支持 scrset，它的做用是根據不一樣的可視區域顯示不一樣尺寸的圖片。你可使用這個屬性來減小移動端用戶的下載時間。例如：
<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
<img src="thumbnail.jpg" />
</a>
複製代碼
fancyBox 還支持禁止右鍵下載來保護圖片。固然這沒法阻止那些下定決心下載的用戶，可是可讓大多數想要盜取你文件的用戶打消這個念頭。
$('[data-fancybox]').fancybox({
protect: true
})
複製代碼
4.2 行內 HTML
對於行內元素，你須要建立一個隱藏的元素並添加獨特的 id 屬性：
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
複製代碼
而後只須要建立一個帶有 data-src 屬性的超連接，該屬性值匹配以前隱藏元素的id（優先使用# ）：
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancyBox
</a>
複製代碼
這段代碼會產生一個關閉按鈕（若是你沒有經過 smallBtn: false 禁用的話），這個按鈕只設置了居中。所以你能夠很輕鬆地經過css來自定義樣式。
4.3 Ajax
想要經過 Ajax 加載內容，須要在超連接添加 data-type="ajax" 屬性：
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
AJAX content
</a>
複製代碼
另外，可使用 data-filter 屬性定義一個選擇器，來顯示響應的一部分。這個選擇器須要是一個合法的 jQuery 選擇器：
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;">
AJAX content
</a>
複製代碼
4.4 Iframe
若是內容能夠展現在頁面，而且放在 iframe 中不會被腳本或者安全策略禁止，它就能夠在 fancyBox 中展現：
<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
Webpage
</a>
<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
Sample PDF
</a>
複製代碼
若是嵌入了 iframe，能夠從父容器中訪問和控制 fancyBox：
// 根據內容調整 iframe 的高度
parent.jQuery.fancybox.getInstance().update();
// 關閉當前的 fancyBox 實例
parent.jQuery.fancybox.getInstance().close();
複製代碼
Iframe 尺寸能夠通多 CSS 調整：
.fancybox-slide--iframe .fancybox-content {
width : 800px;
height : 600px;
max-width : 80%;
max-height : 80%;
margin: 0;
}
複製代碼
若是須要的話，CSS 樣式能夠被 JS 覆蓋：
$("[data-fancybox]").fancybox({
iframe : {
css : {
width : '600px'
}
}
});
複製代碼
若是你沒有禁止 iframe 的預加載（使用preload），那麼fancyBox會嘗試計算內容的尺寸，而且會根據內容來調整 iframe 的寬高。注意，這依賴於同源策略，所以會有一些限制。
下面這個例子禁止了 iframe 的預加載，而且用取消按鈕代替了工具欄。
$('[data-fancybox]').fancybox({
toolbar : false,
smallBtn : true,
iframe : {
preload : false
}
})
複製代碼
5. 嵌入
支持的網站能夠展現在 fancyBox 中，只須要提供頁面的地址便可：
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
YouTube video
</a>
<a data-fancybox href="https://vimeo.com/191947042">
Vimeo video
</a>
<a data-fancybox href="https://www.google.com/maps/search/Empire+State+Building/">
Google Map
</a>
<a data-fancybox href="https://www.instagram.com/p/BNXYW8-goPI/?taken-by=jamesrelfdyer" data-caption="<span title="Edited">balloon rides at dawn ✨🎈<br>was such a magical experience floating over napa valley as the golden light hit the hills.<br><a href="https://www.instagram.com/jamesrelfdyer/">@jamesrelfdyer</a></span>">
Instagram photo
</a>
複製代碼
5.1 視頻尺寸
經過 CSS 調整視頻的顯示大小：
.fancybox-slide--video .fancybox-content {
width : 800px;
height : 600px;
max-width : 80%;
max-height : 80%;
}
複製代碼
顯然，你能夠選擇你喜歡的尺寸。部分未支持的畫面比例，能夠參照這個方法。
5.2 視頻參數
經過 url 中的參數控制視頻
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&showinfo=0">
YouTube video - hide controls and info
</a>
<a data-fancybox href="https://vimeo.com/191947042?color=f00">
Vimeo video - custom color
</a>
複製代碼
經過 JavaScript 控制視頻：
$('[data-fancybox]').fancybox({
youtube : {
controls : 0,
showinfo : 0
},
vimeo : {
color : 'f00'
}
});
複製代碼
6. 選項
默認選項值快速參考：
var defaults = {
// 相冊循環瀏覽
loop : false,
// 圖片周圍的margin，若是視口（viewport）寬度小於800px則忽略
margin : [44, 0],
// Horizontal space between slides
gutter : 50,
// 鍵盤瀏覽
keyboard : true,
// 是否在屏幕邊緣顯示箭頭
arrows : true,
// 是否顯示infobar (頂部的counter and arrows)
infobar : true,
// 是否顯示頂部的toolbar
toolbar : true,
// 控制頂部toolbar裏顯示的圖表
// 經過`btnTpl`選項的模板建立按鈕，並被放置在toolbar(class="fancybox-toolbar"`的元素)中
buttons : [
'slideShow',
'fullScreen',
'thumbs',
'share',
//'download',
//'zoom',
'close'
],
// 探測"idle"的時間(秒)
idleTime : 3,
// 是否在右上角顯示關閉按鈕
// 若是設置爲'auto',遇到內容類型爲html,inline,ajax時顯示
// Use template from `btnTpl.smallBtn` for customization
smallBtn : 'auto',
// 保護文件，禁止右鍵下載
protect : false,
// Shortcut to make content "modal" - 禁止鍵盤瀏覽，隱藏按鈕等
modal : false,
image : {
// 預加載
// 須要預約義圖片的尺寸
// 設置爲'auto'，自動在預覽圖中縮放
preload : "auto"
},
ajax : {
// 請求 ajax 的配置
settings : {
// 代表請求是從模態框中發起，名字可改
data : {
fancybox : true
}
}
},
iframe : {
// Iframe 模板
tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',
// 預加載
// 因爲同源策略，不能加載跨域數據
preload : true,
// 自定義包裹 iframe 的元素的 CSS 樣式
// 這樣就能夠自定義 iframe 的尺寸
css : {},
// iframe 標籤屬性
attr : {
scrolling : 'auto'
}
},
// 若是內容類型不能自動檢測出來，默認值爲'image'
defaultType : 'image',
// 打開/關閉動畫類型
// 可用的值:
// false - disable
// "zoom" - zoom images from/to thumbnail
// "fade"
// "zoom-in-out"
//
animationEffect : "zoom",
// 打開/關閉動畫使用的時間，ms
animationDuration : 500,
// 圖片縮放時是夠改變透明度
// 若是透明度爲'auto'，那麼圖片和縮略圖比例不一致時透明度將會發生改變
zoomOpacity : "auto",
// 滑塊動畫
//
// 可用的值:
// false - disable
// "fade'
// "slide'
// "circular'
// "tube'
// "zoom-in-out'
// "rotate'
//
transitionEffect : "fade",
// 動畫持續時間，ms
transitionDuration : 366,
// 自定義的滑塊的 class 值
slideClass : '',
// 自定義的佈局的 class 值
baseClass : '',
// 佈局的模板
baseTpl :
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
'<span data-fancybox-index></span> / <span data-fancybox-count></span>' +
'</div>' +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
'</div>' +
'</div>',
// 加載中時的模板
spinnerTpl : '<div class="fancybox-loading"></div>',
// 錯誤時的模板
errorTpl : '<div class="fancybox-error"><p>{{ERROR}}<p></div>',
btnTpl : {
download : '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M20,23 L20,8 L20,23 L13,16 L20,23 L27,16 L20,23 M26,28 L13,28 L27,28 L14,28" />' +
'</svg>' +
'</a>',
zoom : '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' +
'</svg>' +
'</button>',
close : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M10,10 L30,30 M30,10 L10,30" />' +
'</svg>' +
'</button>',
// 若是'smallBtn'沒有設置爲 false，默認關閉按鈕將會被放置在你的 html/inline/ajax 內容中
smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>',
// 箭頭
arrowLeft : '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path>' +
'</svg>' +
'</button>',
arrowRight : '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path>' +
'</svg>' +
'</button>'
},
// 模態框放置在哪一個節點中
parentEl : 'body',
// 焦點處理
// ==============
// 打開後焦點在第一個支持焦點的元素上
autoFocus : false,
// 關閉後焦點回到 active 的元素上
backFocus : true,
// 不讓用戶焦點放在模態框外的內容中
trapFocus : true,
// 模態框配置
// =======================
fullScreen : {
autoStart : false,
},
// 設置 `touch: false` 來禁止拖拽/手指滑動
touch : {
vertical : true, // 容許垂直方向拖拽
momentum : true // Continue movement after releasing mouse/touch when panning
},
// 手動初始化時的 hash 值,
// 設爲 `false` 不改變 hash
hash : null,
// 自定義或者添加媒體類型
// 例如:
/* media : { youtube : { params : { autoplay : 0 } } } */
media : {},
slideShow : {
autoStart : false,
speed : 4000
},
thumbs : {
autoStart : false, // 打開的時候展現縮略圖
hideOnClose : true, // 關閉動畫開始時隱藏縮略圖輪廓
parentEl : '.fancybox-container', // Container is injected into this element
axis : 'y' // 垂直 (y) or 水平 (x) 滾動
},
// 使用鼠標滾輪來瀏覽相冊
// 設爲 'auto' - 只對圖片啓用
wheel : 'auto',
// 毀掉函數
//==========
// 更多信息請查看 API
// 例如:
/* afterShow: function( instance, current ) { console.info( 'Clicked element:' ); console.info( current.opts.$orig ); } */
onInit : $.noop, // 實例初始化完成
beforeLoad : $.noop, // 側欄的內容正在被加載
afterLoad : $.noop, // 側欄的內容加載完成後
beforeShow : $.noop, // 打開動畫開始前
afterShow : $.noop, // 內容加載完成，進行動畫的時候
beforeClose : $.noop, // 實例準備關閉的時候，返回 false 值取消關閉
afterClose : $.noop, // 實例關閉後
onActivate : $.noop, // 實例激活的時候
onDeactivate : $.noop, // 其餘實例被激活的時候
// 交互
// ===========
// 使用一下選項自定義用戶單擊雙擊等事件
// 每一個選項能夠是字符串，或者有返回值的方法
//
// 可用的值:
// "close" - close instance
// "next" - move to next gallery item
// "nextOrClose" - move to next gallery item or close if gallery has only one item
// "toggleControls" - show/hide controls
// "zoom" - zoom image (if loaded)
// false - do nothing
// 內容被點擊
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
// 側邊欄被點擊
clickSlide : 'close',
// 點擊模態框外的北京時
clickOutside : 'close',
// 同以前的兩個同樣，只是是雙擊的時候
dblclickContent : false,
dblclickSlide : false,
dblclickOutside : false,
// 移動端事件
// =============================================
mobile : {
idleTime : false,
margin : 0,
clickContent : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : false;
},
clickSlide : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : 'close';
},
dblclickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
dblclickSlide : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
}
},
// 國際化
// ============
lang : 'en',
i18n : {
'en' : {
CLOSE : 'Close',
NEXT : 'Next',
PREV : 'Previous',
ERROR : 'The requested content cannot be loaded. <br/> Please try again later.',
PLAY_START : 'Start slideshow',
PLAY_STOP : 'Pause slideshow',
FULL_SCREEN : 'Full screen',
THUMBS : 'Thumbnails',
DOWNLOAD : 'Download',
SHARE : 'Share',
ZOOM : 'Zoom'
},
'de' : {
CLOSE : 'Schliessen',
NEXT : 'Weiter',
PREV : 'Zurück',
ERROR : 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.',
PLAY_START : 'Diaschau starten',
PLAY_STOP : 'Diaschau beenden',
FULL_SCREEN : 'Vollbild',
THUMBS : 'Vorschaubilder',
DOWNLOAD : 'Herunterladen',
SHARE : 'Teilen',
ZOOM : 'Maßstab'
}
}
};
複製代碼
經過傳入 fancybox 方法一個對象來設置一個實例：
$("[data-fancybox]").fancybox({
thumbs : {
autoStart : true
}
});
複製代碼
能夠經過 $.fancybox.defaults 命名空間修改 fancyBox 的默認選項：
$.fancybox.defaults.animationEffect = "fade";
複製代碼
對於單獨的元素能夠經過 data-options 屬性進行自定義。這個屬性值要求JSON格式的對象：
<a data-fancybox data-options='{"caption" : "My caption", "src" : "https://codepen.io/about/", "type" : "iframe"}' href="javascript:;" class="btn">
Open external page
</a>
複製代碼
7. API
API 提供了一系列的方法來控制 fancyBox。這些方法幫助你擴展插件，整合到其餘的 web 應用中。
7.1 核心方法
操做實例的核心方法：
// 只關閉當前 active 狀態或者全部的 fancyBox 實例
$.fancybox.close( true );
// 打開 fancyBox
$.fancybox.open( items, opts, index );
複製代碼
經過 jQuery 將相冊中的元素變爲 jQuery 對象或者包含純對象的數組，進行更多操做如建立定義點擊事件。
var $links = $('.fancybox');
$links.on('click', function() {
$.fancybox.open( $links, {
// 自定義內容
}, $links.index( this ) );
return false;
});
複製代碼
手動建立一組對象時，組內元素應該遵循如下規則：
{
src : '' // 資源
type : '' // 類型: image|inline|ajax|iframe|html (optional)
opts : {} // 選項 (optional)
}
複製代碼
下面是一個經過 JavaScrip t打開相冊的例子：
$.fancybox.open([
{
src : '1_b.jpg',
opts : {
caption : 'First caption'
}
},
{
src : '2_b.jpg',
opts : {
caption : 'Second caption'
}
}
], {
loop : false
});
複製代碼
fancyBox 容許只傳一個對象。打開行內元素的例子：
$.fancybox.open({
src : '#hidden-content',
type : 'inline',
opts : {
afterShow : function( instance, current ) {
console.info( 'done!' );
}
}
});
// 譯者注：行內元素以下
<div id="#hidden-content">
<p>...content</p>
</div>
複製代碼
若是你想展現一些html文檔（例如一段信息），你只須要使用很簡單的一句語法。fancyBox 建議使用一個wrapper 包裹你的內容。
$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
複製代碼
7.2 實例的方法
你須要定義一個實例來使用實例的方法。
var instance = $.fancybox.open(
// 內容和選項
);
複製代碼
從當前 active 的實例中獲取信息：
var instance = $.fancybox.getInstance();
複製代碼
回調函數的第一個參數返回實例信息：
$("[data-fancybox]").fancybox({
afterShow : function( instance, current ) {
console.info( instance );
}
});
複製代碼
實例能夠調用如下方法：
// 跳到下一個相冊元素
instance.next( duration );
//跳到上一個相冊元素
instance.previous( duration );
// 調到選中的相冊元素
instance.jumpTo( index, duration );
// 檢測當前尺寸是否小於實際尺寸
instance.isScaledDown();
// 縮放到實際尺寸
instance.scaleToActual( x, y, duration );
// 檢測尺寸是否超過父元素
instance.canPan();
// 縮放適應父元素尺寸
instance.scaleToFit( duration );
// 更新滑塊的內容和位置
instance.update();
// 更新側邊欄的位置， 縮放內容來適應
instance.updateSlide( slide );
// 更新 infobar 的值， 導航按鈕的狀態， 和展現標題
instance.updateControls( force );
// 在側邊欄中加載自定義內容
instance.setContent( slide, content );
// 在側邊欄中加載loading效果
instance.showLoading( slide );
// 從側邊欄中去除loading效果
instance.hideLoading( slide );
// 找到和把焦點放在第一個能夠放置焦點的元素
instance.focus();
// 激活當前 active 的實例，顯示在最前面
instance.activate();
// 關閉實例
instance.close();
複製代碼
你能夠這樣使用：
$.fancybox.getInstance().jumpTo(1);
複製代碼
或者：
$.fancybox.getInstance('jumpTo', 1);
複製代碼
7.3 事件
fancyBox 支持觸發如下事件：
beforeLoad : 滑塊的內容加載前
afterLoad : 滑塊內容加載後
beforeShow : 打開動畫開始前
afterShow : 內容或者動畫加載完成
beforeClose : 實例準備關閉前，染回`false`取消關閉
afterClose : 實例關閉後
onInit : 實例初始化完成
onActivate : 實例active狀態
onDeactivate : 其餘實例變爲active狀態
複製代碼
事件能夠做爲一個對象的函數屬性，該對象做爲參數傳入到 fancyBox 初始化方法中：
<script type="text/javascript">
$("[data-fancybox]").fancybox({
afterShow: function( instance, slide ) {
// Tip: Each event passes useful information within the event object:
// Object containing references to interface elements
// (background, buttons, caption, etc)
// console.info( instance.$refs );
// Current slide options
// console.info( slide.opts );
// Clicked element
// console.info( slide.opts.$orig );
// Reference to DOM element of the slide
// console.info( slide.$slide );
}
});
</script>
複製代碼
每個回調函數接收兩個參數 —— 當前的 fancyBox 實例和當前的相冊對象（若是它們存在）。
fancyBox也支持觸發全部的實例事件。爲了防止和其餘的腳本產生干擾，這些事件命名爲.fb結尾。這些事件函數接收3個參數—事件（event），當前的 fancyBox 實例和當前的相冊對象。
下面例子是綁定afterShow事件：
$(document).on('afterShow.fb', function( e, instance, slide ) {
// Your code goes here
});
複製代碼
若是你想阻止當前彈窗的關閉（例如在表單提交以後），可使用beforeClose。只須要返回false便可：
beforeClose : function( instance, current, e ) {
if ( $('#my-field').val() == '' ) {
return false;
}
}
複製代碼
8. 模塊
fancyBox 代碼被分紅幾個擴展核心功能的文件（模塊）。你能夠經過去除沒必要要的模塊來構建你本身的 fancyBox 版本。若是須要，每個模塊有本身的.js和.css文件。
// 自定義、添加新的媒體類型
// 例如:
/* media : { youtube : { params : { autoplay : 0 } } } */
media : {},
slideShow : {
autoStart : false,
speed : 4000
},
thumbs : {
autoStart : false, // 打開時顯示縮略圖
hideOnClose : true, // Hide thumbnail grid when closing animation starts
parentEl : '.fancybox-container', // Container is injected into this element
axis : 'y' // Vertical (y) or horizontal (x) scrolling
}
Example (show thumbnails on start):
複製代碼
開始時展現縮略圖的例子：
$('[data-fancybox="images"]').fancybox({
thumbs : {
autoStart : true
}
})
複製代碼
若是你查看了 fancyBox 的實例對象，你會發現一些key的值是大寫的 —— 他們關聯着其餘模塊的對象。固然，你也會發現 fancyBox 使用和 jQuery 一直的前綴 $ 。
下面例子爲如何拿到縮略圖柵格元素：
$.fancybox.getInstance().Thumbs.$grid
複製代碼
下面例子爲如何調用切換縮略圖的方法：
$.fancybox.getInstance().Thumbs.toggle();
複製代碼
可以使用的方法列表：
Thumbs.focus()
Thumbs.update();
Thumbs.hide();
Thumbs.show();
Thumbs.toggle();
FullScreen.request( elem );
FullScreen.exit();
FullScreen.toggle( elem );
FullScreen.isFullscreen();
FullScreen.enabled();
SlideShow.start();
SlideShow.stop();
SlideShow.toggle();
複製代碼
若是你想禁止 hash 模塊，使用下面代碼片斷（引用 JS 以後）：
$.fancybox.defaults.hash = false;
複製代碼
9. FAQ
1. 打開、關閉致使固定定位的元素移動
在固定定位的元素的class中加入compensate-for-scrollbar。例子爲使用Bootstrap的navbar組件：
<nav class="navbar navbar-inverse navbar-fixed-top compensate-for-scrollbar">
<div class="container">
..
</div>
</nav>
複製代碼
上個例子中，腳本會測量滾動條的寬度，建立compensate-for-scrollbar樣式並將寬度值複製到該樣式的margin-right屬性。所以，若是你的元素寬度設置爲width:100%，你應該同時使用left和right定位，例如：
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
複製代碼
2. 如何自定義標題
你可使用caption選項，它接收一個函數，而且被組內的每一個元素調用。例子爲增長圖片下載連接：
$( '[data-fancybox="images"]' ).fancybox({
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';
if ( item.type === 'image' ) {
caption = (caption.length ? caption + '<br />' : '') + '<a href="' + item.src + '">Download image</a>' ;
}
return caption;
}
});
複製代碼
在標題右邊增長當前圖片的序號和圖片總數：
$( '[data-fancybox="images"]' ).fancybox({
infobar : false,
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';
return ( caption.length ? caption + '<br />' : '' ) + 'Image <span data-fancybox-index></span> of <span data-fancybox-count></span>';
}
});
複製代碼
在caption方法裏面，this指向被點擊的元素。例子爲使用不一樣的標題：
$( '[data-fancybox]' ).fancybox({
caption : function( instance, item ) {
return $(this).find('figcaption').html();
}
});
複製代碼
3. 如何在tool上建立自定義按鈕
建立可重複使用的按鈕例子：
// 建立按鈕模板
$.fancybox.defaults.btnTpl.fb = '<button data-fancybox-fb class="fancybox-button fancybox-button--fb" title="Facebook">' +
'<svg viewBox="0 0 24 24">' +
'<path d="M22.676 0H1.324C.594 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294h-3.13v-3.62h3.13V8.41c0-3.1 1.894-4.785 4.66-4.785 1.324 0 2.463.097 2.795.14v3.24h-1.92c-1.5 0-1.793.722-1.793 1.772v2.31h3.584l-.465 3.63h-3.12V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .594 23.408 0 22.676 0"/>' +
'</svg>' +
'</button>';
// 使用時間代理使按鈕可點擊
$('body').on('click', '[data-fancybox-fb]', function() {
window.open("https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&t="+encodeURIComponent(document.title), '','left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
});
// 自定義按鈕
$( '[data-fancybox="images"]' ).fancybox({
buttons : [
'fb',
'close'
]
});
複製代碼
4. 如何重置縮略圖柵格的位置
這裏沒有 JS 選項去改變縮略圖柵格的位置，可是 fancyBox 容許你使用 CSS 來改變每一個塊元素的位置或者尺寸（例如：內容區域，標題或者縮略圖柵格）。這使你很自由的改變彈框窗口的外觀和樣式。
5. 如何禁止touch操做
當你想內容可選擇或者可點擊，有兩個選項：
- 設置
touch:false徹底禁止 touch 操做 - 添加
data-selectable="true"屬性到你的 html 元素
相關文章
- 1. 【翻譯】InversifyJS 中文文檔
- 2. chart.js 中文文檔 翻譯
- 3. axios 中文文檔 翻譯
- 4. rollup文檔翻譯 中文文檔
- 5. Thymeleaf Tutorial 中文翻譯，中文文檔
- 6. ffmpeg翻譯文檔
- 7. httpclient4 文檔翻譯
- 8. MPAndroidChart文檔翻譯
- 9. es6英文文檔翻譯
- 10. Spark官方文檔 - 中文翻譯
- 更多相關文章...
- • WSDL 文檔 - WSDL 教程
- • XSL-FO 文檔 - XSL-FO 教程
- • Scala 中文亂碼解決
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章