【翻譯】fancyBox3 中文文件

kk124發表於2017-12-13

fancyBox3 中文文件

譯文永久地址：kangkai124.github.io/fancybox/

說明：本文件僅供參考，更新不及時請檢視官方文件

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>

	<!-- 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>
複製程式碼

注意

  • 要先引入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>
複製程式碼

在 CodePen 上檢視例子

這種方式使用預設的配置，可以檢視選項進行自定義配置，或者使用data-options屬性。

3.2 使用 JavaScript 初始化

使用 jQuery 選擇器選擇一個元素，然後呼叫fancybox方法：

<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// Options will go here
	});
</script>
複製程式碼

在 CodePen 上檢視例子

使用這種方式，只有被選中的元素才可以觸發點選事件。

為了可以現在或之後存在的元素都可以觸發點選事件，使用selector選項。例如：

$().fancybox({
  selector : '[data-fancybox="images"]',
  loop     : true
});
複製程式碼

在 CodePen 上檢視例子

3.3 手動呼叫 fancyBox

fancyBox 允許使用 JavaScrip t以任意形式觸發，因此不必需要通過某一個元素觸發。下面例子為展示一段簡單的資訊：

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
複製程式碼

在 CodePen 上檢視例子

通過 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>
複製程式碼

在 CodePen 上檢視例子

注意

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 上檢視例子

預設情況下，fancyBox 會在一張圖片展示前進行預載入。你可以選擇立即顯示圖片，這樣當載入完成後會馬上渲染和顯示完整尺寸的圖片。不過，以下屬性是必須新增的：

  • data-width - 圖片的完整寬度
  • data-height - 圖片的完整高度
<a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
    <img src="thumbnail.jpg" />
</a>
複製程式碼

在 CodePen 上檢視例子

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 上檢視例子

fancyBox 還支援禁止右鍵下載來保護圖片。當然這無法阻止那些下定決心下載的使用者，但是可以讓大多數想要盜取你檔案的使用者打消這個念頭。

$('[data-fancybox]').fancybox({
  protect: true
})
複製程式碼

在 CodePen 上檢視例子

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 上檢視例子

這段程式碼會產生一個關閉按鈕（如果你沒有通過 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 上檢視例子

另外，可以使用 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 上檢視例子

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 上檢視例子

如果嵌入了 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
	}
})
複製程式碼

在 CodePen 上檢視例子

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=&quot;Edited&quot;>balloon rides at dawn ✨?<br>was such a magical experience floating over napa valley as the golden light hit the hills.<br><a href=&quot;https://www.instagram.com/jamesrelfdyer/&quot;>@jamesrelfdyer</a></span>">
	Instagram photo
</a>
複製程式碼

在 CodePen 上檢視例子

5.1 視訊尺寸

通過 CSS 調整視訊的顯示大小：

.fancybox-slide--video .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
}
複製程式碼

在 CodePen 上檢視例子

顯然，你可以選擇你喜歡的尺寸。部分未支援的畫面比例，可以參照這個方法。

5.2 視訊引數

通過 url 中的引數控制視訊

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;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 上檢視例子

通過 JavaScript 控制視訊：

$('[data-fancybox]').fancybox({
	youtube : {
		controls : 0,
		showinfo : 0
	},
	vimeo : {
		color : 'f00'
	}
});
複製程式碼

在 CodePen 上檢視例子

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>&nbsp;/&nbsp;<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 上檢視例子

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 上檢視例子

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 上檢視例子

如果你想展示一些html文件（例如一段資訊），你只需要使用很簡單的一句語法。fancyBox 建議使用一個wrapper 包裹你的內容。

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
複製程式碼

在 CodePen 上檢視例子

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 上檢視例子

上個例子中，指令碼會測量滾動條的寬度，建立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 上檢視例子

在標題右邊增加當前圖片的序號和圖片總數：

$( '[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 上檢視例子

在caption方法裡面，this指向被點選的元素。例子為使用不同的標題：

$( '[data-fancybox]' ).fancybox({
	caption : function( instance, item ) {
		return $(this).find('figcaption').html();
	}
});
複製程式碼

在 CodePen 上檢視例子

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 上檢視例子

4. 如何重置縮圖柵格的位置

這裡沒有 JS 選項去改變縮圖柵格的位置，但是 fancyBox 允許你使用 CSS 來改變每個塊元素的位置或者尺寸（例如：內容區域，標題或者縮圖柵格）。這使你很自由的改變彈框視窗的外觀和樣式。

在 CodePen 上檢視例子

5. 如何禁止touch操作

當你想內容可選擇或者可點選，有兩個選項：

  • 設定touch:false完全禁止 touch 操作
  • 新增data-selectable="true"屬性到你的 html 元素

在 CodePen 上檢視例子

相關文章