PhotoSwipe中文API(二)

配置

選項是在鍵 - 值對添加作為參數傳遞給PhotoSwipe構造，例如通過：

var options = {
    index: 3,
    escKey: false,

    // ui option
    timeToIdle: 4000
};
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();

// Note that options object is cloned during the initialization.
// But you can access it via `gallery.options`.
// For example, to dynamically change `escKey`:
gallery.options.escKey = false;

// `options.escKey = false` will not work

核心

index integer 0

開始放映指數。 0是第一滑動。必須是整數，而不是字符串。

getThumbBoundsFn function undefined

功能應該與坐標從初始變焦的動畫將啟動（或縮小出動畫將結束）返回一個對象。

對象應包含三個屬性：X（X位置，相對於文檔），Y（Y位置，相對於文檔），W（元素的寬度）。高度會自動根據大的圖像大小來計算。例如，如果您返回{X：0，Y：0，W：50}縮放動畫將在你的頁面的左上角開始。

函數有一個參數 - 即打開或關閉項目的索引。

在非模態模式，相對於視口模板的位置應該從x和y中減去。看常見問題以獲取更多信息。

例如，計算縮略圖的位置：

getThumbBoundsFn: function(index) {

    // find thumbnail element
    var thumbnail = document.querySelectorAll('.my-gallery-thumbnails')[index];

    // get window scroll Y
    var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
    // optionally get horizontal scroll

    // get position of element relative to viewport
    var rect = thumbnail.getBoundingClientRect(); 

    // w = width
    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};


    // Good guide on how to get element coordinates:
    // http://javascript.info/tutorial/coordinates
}

如果你的小縮略圖的尺寸不匹配大的圖像尺寸，考慮啟用變焦+淡出過渡。您可以通過添加選項showHideOpacity做到這一點：真（嘗試將其添加到上面CodePen來測試它的外觀）。或通過添加hideAnimationDuration完全禁用過渡：0，showAnimationDuration：0。這個常見問題中的更多信息。

如果你想利用動畫時不透明度為“隱藏”小縮略圖：0，不可見性：隱藏或顯示：無。不要強迫油漆和布局在動畫的開頭，以避免滯后。

showHideOpacity boolean false

如果設置為false：背景透明度和圖像規模將動畫（圖像透明度始終為1）。如果設置為true：根PhotoSwipe元素的不透明性和圖像規模將動畫。
為了讓剛轉型的不透明度（未經調整），不要定義getThumbBoundsFn選項。

showAnimationDuration integer 333

以毫秒為單位的初始放大的過渡時間。設置為0來禁用。除了這個JS選項，你也需要改變PhotoSwipe CSS文件轉換時間：

.pswp--animate_opacity,
.pswp__bg,
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right{
    -webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1);
    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
}

如果你使用的無禮，你只需要更改主settings.scss過渡時間變量。

hideAnimationDuration integer 333

同樣作為一個選項，只是關閉（縮放出）轉型。 PhotoSwipe被打開后PSWP - 公開課將被添加到根元素，你可以用它在CSS中使用不同的過渡時間。

bgOpacity number 1

背景（.pswp_bg）透明度。應該是從0到1，即0.7。此樣式是通過JS限定，而不是通過CSS，因為此值用於一些基於姿勢的過渡。

spacing number 0.12

幻燈片之間的間距比。例如，0.12將呈現為滑動視口寬度的12％（四舍五入）。

allowPanToNext boolean true

允許刷卡導航到下一個/上一個項目時，當前項目被放大。選項始終是在沒有硬件支持觸控設備假的。

maxSpreadZoom number 2

進行擴展（變焦）手勢時，最大縮放級別。 2意味着圖像可以從原始尺寸被放大2倍。盡量避免在這里巨大的價值，因為過大的圖像可以在移動導致內存問題（特別是在iOS）。

getDoubleTapZoom function

函數將返回縮放級別的圖像將雙擊手勢之后進行縮放其中，或圖像本身，當用戶點擊縮放圖標，或者鼠標點擊。如果返回1的圖像將被放大到原來的大小。

Default value:

getDoubleTapZoom: function(isMouseClick, item) {

    // isMouseClick          - true if mouse, false if double-tap
    // item                  - slide object that is zoomed, usually current
    // item.initialZoomLevel - initial scale ratio of image
    //                         e.g. if viewport is 700px and image is 1400px,
    //                              initialZoomLevel will be 0.5

    if(isMouseClick) {

        // is mouse click on image or zoom icon

        // zoom to original
        return 1;

        // e.g. for 1400px image:
        // 0.5 - zooms to 700px
        // 2   - zooms to 2800px

    } else {

        // is double-tap

        // zoom to original if initial zoom is less than 0.7x,
        // otherwise to 1.5x, to make sure that double-tap gesture always zooms image
        return item.initialZoomLevel < 0.7 ? 1 : 1.5;
    }
}

函數被調用每一個放大的動畫啟動的時間。可以隨意根據自己的尺寸和屏幕的DPI不同的圖像返回不同的值。

loop boolean true

循環使用滑動手勢時，幻燈片。如果設置為true，你就可以從上輕掃到第一張圖像。選項始終是假的時，有不到3張幻燈片。

此選項沒有關系箭頭導航。箭頭循環永久開啟。您可以修改通過自定義UI此行為。

pinchToClose boolean true

捏關閉畫廊的姿態。畫廊的背景將逐漸淡出作為用戶縮小。當手勢完成后，畫廊將關閉。

closeOnScroll boolean true

在頁面滾動關閉畫廊。選項可只是沒有硬件支持觸控設備。

closeOnVerticalDrag boolean true

垂直拖動關閉畫廊時，當影像未縮放。始終為假時使用鼠標。

mouseUsed boolean false

選項允許如果使用與否鼠標就預定義。有些PhotoSwipe功能依賴於它，例如默認的UI左/右箭頭會顯示使用鼠標之后。如果設置為false，PhotoSwipe將開始檢測時，鼠標的使用本身，當鼠標被發現mouseUsed事件觸發。

escKey boolean true

鍵盤ESC鍵關閉PhotoSwipe。選項可以更改動態（yourPhotoSwipeInstance.options.escKey= FALSE）。

arrowKeys boolean true

鍵盤向左或向右箭頭鍵導航。選項可以動態改變（yourPhotoSwipeInstance.options.arrowKeys=假）。

history boolean true

如果設置為false禁用歷史模塊（后退按鈕關閉畫廊，獨特的URL為每張幻燈片）。您也可以剛剛從構建排除history.js模塊。

galleryUID integer 1

畫廊的唯一ID。由歷史形成的模塊URL時使用。例如，UID1畫廊的第二張照片將有網址：http://example.com/#&gid=1&pid=2。

galleryPIDs boolean false

啟用對於正在形成URL時使用的每個幻燈片對象自定義標識。如果選項設置為true，幻燈片對象必須具有PID（圖片標識符）屬性，可以是一個字符串或一個整數。 例如：

var slides = [
    {
        src: 'path/to/1.jpg',
        w:500,
        h:400,
        pid: 'image-one'
    },
    {
        src: 'path/to/2.jpg',
        w:300,
        h:700,
        pid: 'image-two'
    },

    ... 
];

......第二張幻燈片將URL http://example.com/#&gid=1&pid=image-two。

了解更多關於如何實現在FAQ部分定制的PID。

errorMsg string

未加載圖像時的錯誤消息。 ％URL％將圖像的URL來代替。

Default value:

<div class="pswp__error-msg"><a href="%url%" target="_blank">The image</a> could not be loaded.</div>

preload array [1,1]

基於運動方向附近的幻燈片延遲加載。應該是兩個整數數組，第一個 - 當前圖像之前預加載的項目數，第二個 - 當前圖像之后。 例如。如果你把它設置為[1,3]，它會之前，在當前負載1的圖像，目前后3圖像。值不能小於1。

mainClass string undefined

字符串將被添加到根PhotoSwipe（.pswp）的元素類的名稱。可以包含由空格分隔的多個類。

getNumItemsFn function

功能應該在畫廊返回的項目總數。默認情況下它返回幻燈片數組的長度。不要把很復雜的代碼在這里，函數經常執行。

focus boolean true

之后它的開放將焦點設置PhotoSwipe元素上。

isClickableElement function

Default value:

isClickableElement: function(el) {
    return el.tagName === 'A';
}

函數應該檢查元素（EL）是可以點擊的。如果是 - PhotoSwipe不會叫的preventDefault和點擊事件會通過。功能應該是輕是可能的，因為它是在拖動開始和拖動發布執行多次。

modal boolean true

控制PhotoSwipe是否應該擴大到占據整個視口。如果為假，則PhotoSwipe元件將模板的定位的父的大小。看看常見問題以獲取更多信息。

Default UI Options

對於PhotoSwipe用戶界面默認（DIST/ UI / photoswipe-UI-default.js）選項添加同樣的方式和同樣的目標為核心的選項。

// Size of top & bottom bars in pixels,
// "bottom" parameter can be 'auto' (will calculate height of caption)
// option applies only when mouse is used, 
// or width of screen is more than 1200px
// 
// (Also refer to `parseVerticalMargin` event)
barsSize: {top:44, bottom:'auto'}, 

// Adds class pswp__ui--idle to pswp__ui element when mouse isn't moving for 4000ms
timeToIdle: 4000,

// Same as above, but this timer applies when mouse leaves the window
timeToIdleOutside: 1000,

// Delay until loading indicator is displayed
loadingIndicatorDelay: 1000,

// Function builds caption markup
addCaptionHTMLFn: function(item, captionEl, isFake) {
    // item      - slide object
    // captionEl - caption DOM element
    // isFake    - true when content is added to fake caption container
    //             (used to get size of next or previous caption)

    if(!item.title) {
        captionEl.children[0].innerHTML = '';
        return false;
    }
    captionEl.children[0].innerHTML = item.title;
    return true;
},

// Buttons/elements
closeEl:true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
counterEl: true,
arrowEl: true,
preloaderEl: true,

// Tap on sliding area should close gallery
tapToClose: false,

// Tap should toggle visibility of controls
tapToToggleControls: true,

// Mouse click on image should close the gallery,
// only when image is smaller than size of the viewport
clickToCloseNonZoomable: true,

// Element classes click on which should close the PhotoSwipe.
// In HTML markup, class should always start with "pswp__", e.g.: "pswp__item", "pswp__caption".
// 
// "pswp__ui--over-close" class will be added to root element of UI when mouse is over one of these elements
// By default it's used to highlight the close button.
closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], 

// Separator for "1 of X" counter
indexIndicatorSep: ' / ',



// Share buttons
// 
// Available variables for URL:
// {{url}}             - url to current page
// {{text}}            - title
// {{image_url}}       - encoded image url
// {{raw_image_url}}   - raw image url
shareButtons: [
    {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
    {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
    {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
    {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
],


// Next 3 functions return data for share links
// 
// functions are triggered after click on button that opens share modal,
// which means that data should be about current (active) slide
getImageURLForShare: function( shareButtonData ) {
    // `shareButtonData` - object from shareButtons array
    // 
    // `pswp` is the gallery instance object,
    // you should define it by yourself
    // 
    return pswp.currItem.src || '';
},
getPageURLForShare: function( shareButtonData ) {
    return window.location.href;
},
getTextForShare: function( shareButtonData ) {
    return pswp.currItem.title || '';
},

// Parse output of share links
parseShareButtonOut: function(shareButtonData, shareButtonOut) {
    // `shareButtonData` - object from shareButtons array
    // `shareButtonOut` - raw string of share link element
    return shareButtonOut;
}