fancyBox3圖片預覽 · vue.js

# fancyBox3 中文文檔 > 譯文永久地址：[kangkai124.github.io/fancybox/](https://link.juejin.im/?target=https%3A%2F%2Fkangkai124.github.io%2Ffancybox%2F) > > 說明：本文檔僅供參考，更新不及時請查看[官方文檔](https://link.juejin.im/?target=https%3A%2F%2Ffancyapps.com%2Ffancybox%2F3%2Fdocs%2F) ## 1\. 介紹 fancyBox 是一個 JavaScript 庫，它以優雅的方式展示圖片，視頻和一些 html 內容。它包含你所期望的一切特性 —— 支持觸屏，響應式和高度自定義。 ### 1.1 依賴推薦 jQuery 3+，但是 fancyBox 仍支持 jQery 1.9.1+ 和 jQuery 2+ 。 > 注意 > > 如果你在圖片縮放時遇到了問題，請升級 jQuery 到最近版本（至少v3.2.1）。 ### 1.2 兼容 fancyBox 支持觸屏操作，而且支持縮放等手勢操作。在移動端和PC端上都十分合適。 fancyBox 已經在下列瀏覽器中測試： * Chrome * firefox * IE10/11 * Edge * IOS Safari * Nexus 7 Chrome ## 2\. 配置可以在 html 文檔中引入`.css`和`.js`來使用fancyBox，確保在這之前引入了 jQuery 庫。下面是使用fancyBox的一個基本的HTML模板： ~~~ <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>My page</title>  <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"></head><body>   <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.fancybox.min.js"></script></body></html>復制代碼 ~~~ > 注意 > > * 要先引入jQuery > * 如果頁面中已經引入過jQuery，不能再次引入 > * 不要同時引入`fancybox.js`和`fancybox.min.js` > * 一些方法（ajax，iframes 等）必須在一個web服務器上才可以正常運行，在瀏覽器打開一個本地文件是無法正常工作的 ### 2.1 下載fancyBox 可以在[GIthub](https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Ffancyapps%2Ffancybox)下載最新的版本。或者直接引用 cdnjs —[cdnjs.com/libraries/f…](https://link.juejin.im/?target=https%3A%2F%2Fcdnjs.com%2Flibraries%2Ffancybox)。 ### 2.2 包管理工具 fancyBox 還可以通多 npm 和 Bower安裝。 ~~~ # NPMnpm install @fancyapps/fancybox --save # Bowerbower 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FrYLzBR%3Feditors%3D1000) 這種方式使用默認的配置，可以查看[選項](https://link.juejin.im/?target=http%3A%2F%2Ffancyapps.com%2Ffancybox%2F3%2Fdocs%2F%23options)進行自定義配置，或者使用`data-options`屬性。 ### 3.2 使用 JavaScript 初始化使用 jQuery 選擇器選擇一個元素，然后調用`fancybox`方法： ~~~ <script type="text/javascript"> $("[data-fancybox]").fancybox({ // Options will go here });</script>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FJOKyYo%3Feditors%3D1010) 使用這種方式，只有被選中的元素才可以觸發點擊事件。為了可以現在或之后存在的元素都可以觸發點擊事件，使用`selector`選項。例如： ~~~ $().fancybox({ selector : '[data-fancybox="images"]', loop : true});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FzPBEdz%3Feditors%3D1010) ### 3.3 手動調用 fancyBox fancyBox 允許使用 JavaScrip t以任意形式觸發，因此不必需要通過某一個元素觸發。下面例子為展示一段簡單的信息： ~~~ $.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FxPOLVb%3Feditors%3D1010) 通過[API](https://link.juejin.im/?target=http%3A%2F%2Ffancyapps.com%2Ffancybox%2F3%2Fdocs%2F%23api)查看更多的信息和例子。 ### 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FqVNXrZ%3Feditors%3D1000) > 注意 > > 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FmqEMGX%3Feditors%3D1000) 默認情況下，fancyBox 會在一張圖片展示前進行預加載。你可以選擇立即顯示圖片，這樣當加載完成后會馬上渲染和顯示完整尺寸的圖片。不過，以下屬性是必須添加的： * `data-width`\- 圖片的完整寬度 * `data-height`\- 圖片的完整高度 ~~~ <a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365"> <img src="thumbnail.jpg" /></a>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FJOKywE%3Feditors%3D1000) 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FgXMxJj%3Feditors%3D1000) fancyBox 還支持禁止右鍵下載來保護圖片。當然這無法阻止那些下定決心下載的用戶，但是可以讓大多數想要盜取你文件的用戶打消這個念頭。 ~~~ $('[data-fancybox]').fancybox({ protect: true})復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FrYLGBe) ### 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FOOXxLa) 這段代碼會產生一個關閉按鈕（如果你沒有通過`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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FqVNPEX%3Feditors%3D1100) 另外，可以使用`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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FQOEqwe%3Feditors%3D1100) ### 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FdZXVoJ%3Feditors%3D1000) 如果嵌入了 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 的寬高。注意，這依賴于[同源策略](https://link.juejin.im/?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSame-origin_policy)，因此會有一些限制。下面這個例子禁止了 iframe 的預加載，并且用取消按鈕代替了工具欄。 ~~~ $('[data-fancybox]').fancybox({ toolbar : false, smallBtn : true, iframe : { preload : false }})復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FrYLGeM%3Feditors%3D1010) ## 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FzPBEBN%3Feditors%3D1000) ### 5.1 視頻尺寸通過 CSS 調整視頻的顯示大小： ~~~ .fancybox-slide--video .fancybox-content { width : 800px; height : 600px; max-width : 80%; max-height : 80%;}復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FYEWrWL%3Feditors%3D1100) 顯然，你可以選擇你喜歡的尺寸。部分未支持的畫面比例，可以[參照這個方法](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FNgKNRz%3Feditors%3D1010)。 ### 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=http%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FooLGzE%3Feditors%3D1000) 通過 JavaScript 控制視頻： ~~~ $('[data-fancybox]').fancybox({ youtube : { controls : 0, showinfo : 0 }, vimeo : { color : 'f00' }});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=http%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FxPOXRL%3Feditors%3D1010) ## 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FzPBEww%3Feditors%3D1000) ## 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});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FWXxZMv%3Feditors%3D1010) fancyBox 允許只傳一個對象。打開行內元素的例子： ~~~ $.fancybox.open({ src : '#hidden-content', type : 'inline', opts : { afterShow : function( instance, current ) { console.info( 'done!' ); } }});// 譯者注：行內元素如下<div id="#hidden-content"> <p>...content</p></div>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FmqEqgr%3Feditors%3D1010) 如果你想展示一些html文檔（例如一段信息），你只需要使用很簡單的一句語法。fancyBox 建議使用一個wrapper 包裹你的內容。 ~~~ $.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FJOKOgP) ### 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>復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FxPOpZx%3Feditors%3D1000) 上個例子中，腳本會測量滾動條的寬度，創建`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; }});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FjarYdo%3Feditors%3D1010) 在標題右邊增加當前圖片的序號和圖片總數： ~~~ $( '[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>'; }});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FEbyQMQ%3Feditors%3D1010) 在`caption`方法里面，`this`指向被點擊的元素。例子為使用不同的標題： ~~~ $( '[data-fancybox]' ).fancybox({ caption : function( instance, item ) { return $(this).find('figcaption').html(); }});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FEbyQzE%3Feditors%3D1010) ### 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' ]});復制代碼 ~~~ [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FMOEXmJ) ### 4\. 如何重置縮略圖柵格的位置這里沒有 JS 選項去改變縮略圖柵格的位置，但是 fancyBox 允許你使用 CSS 來改變每個塊元素的位置或者尺寸（例如：內容區域，標題或者縮略圖柵格）。這使你很自由的改變彈框窗口的外觀和樣式。 [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FRjRQzm) ### 5\. 如何禁止touch操作當你想內容可選擇或者可點擊，有兩個選項： * 設置`touch:false`完全禁止 touch 操作 * 添加`data-selectable="true"`屬性到你的 html 元素 [在 CodePen 上查看例子](https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Ffancyapps%2Fpen%2FOOXxLa)