原文地址，點擊直達，閱讀效果更佳

Options

options是一個鍵值對對象，傳遞給PhotoSwipe的構造函數。
例如：

var options = {index: 3,escKey: false,// ui optiontimeToIdle: 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

是第一個圖像（ slide ）的索引，必須是整型，不可以是一個字符串。

獲取動畫開始或結束時的對象坐標getThumbBoundsFn

從最初的放大動畫開始時（或從最后的縮小動畫結束時），函數應該返回一個對象坐標。
對象包含三個屬性：

x：x坐標，相對于document元素

y：y坐標，相對于document元素

w：元素的寬度，高度基于最大圖像的尺寸自動計算。

例如：縮放動畫在頁面的左上角開始時，getThumbBoundsFn返回{x:0,y:0,w:50}

該getThumbBoundsFn函數有一個參數：打開（或關閉）畫廊的索引項。

在非模態模式下，模板的位置相對于視口（viewport）應該減去x和y。更多信息：FAQ

下面是縮略圖位置計算的例子：

getThumbBoundsFn: function(index) {// find thumbnail elementvar thumbnail = document.querySelectorAll('.my-gallery-thumbnails')[index];// get window scroll Yvar pageYScroll = window.pageYOffset || document.documentElement.scrollTop; // optionally get horizontal scroll// get position of element relative to viewportvar rect = thumbnail.getBoundingClientRect(); // w = widthreturn {x:rect.left, y:rect.top + pageYScroll, w:rect.width};// Good guide on how to get element coordinates:// http://javascript.info/tutorial/coordinates }

如果小縮略圖的尺寸不能匹配大圖像的尺寸，可考慮啟用縮放+漸進過渡。你可以通添加options的showHideOpacity:true開啟（或通過添加hideAnimationDuration:0, showAnimationDuration:0來禁止過渡動畫。更多關于此的信息，請查看FAQ

如果你想在動畫運行期間隱藏縮略圖，可以使用opacity:0,不要使用visibility:hidden和display:none。
為了避免延遲，在動畫的開始時，不要強制繪制和布局。

不透明轉換showHideOpacity:false

如果設置為false, 背景 opacity 屬性和圖像的 scale 屬性將會是活動的；
如果設置為true, PhotoSwipe的根元素的 opacity 屬性和圖像的 scale 屬性將會是活動的；
而無論設置true或false，圖像image不透明度總是1。

若要只啟用不透明（opacity）轉換(無縮放) ，請不要定義 getthumboundsfn 選項。

初始放大動畫持續時間showAnimationDuration

初始放大動畫持續時間，設置為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); }

如果你使用的是sass你只需要在main-setting.scss文件中更改transition-duration變量的值。

結束縮放（關閉）動畫持續時間hideAnimationDuration

與前一個選項相同，只是用于關閉(縮小)過渡。 photoSwipe打開后，pswp--openCSS類將添加到根元素，在CSS文件中，你可以使用這個類請求不同的過渡持續時間。

背景不透明度bgOpacity

背景（.pswp__bg）不透明度，應該是從0到1的數字，例如：0.7，這個樣式是通過js定義的。因為這個值用于一些基于手勢的轉換。

幻燈片間距比spacing

例如：0.12，將呈現滑動視窗寬度的12%（圓角）；

是否允許滑動導航allowPanToNext: true

當前圖庫項正被縮放時，允許滑動導航到下一個/前一個圖庫項。在沒有硬件觸摸支持的設備(一般為手機)上，選項總是false。

最大縮放級別maxSpreadZoom

執行縮放手勢的最大縮放級別。2意味著圖像可以從原始尺寸被放大2倍。但是應該盡量避免比較大的值，因為過大的圖像可能會導致移動設備的內存問題（尤其是IOS）

雙擊手勢放大圖像后與之前的圖像的縮放級別getDoubleTapZoom

在雙擊手勢（或當用戶單擊縮放圖標或鼠標單擊圖像本身時）圖像放大后，函數應該返回縮放級別。
如果返回1，圖像將被放大到原來的大小。

默認值：0.5

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.5if(isMouseClick) {// is mouse click on image or zoom icon// zoom to originalreturn 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 imagereturn item.initialZoomLevel < 0.7 ? 1 : 1.5;} }

函數在每次啟動放大動畫時調用。因此，可以根據不同圖像的大小或屏幕DPI自由的返回不同的值。

循環loop

使用滑動手勢時循環滑動。如果設置為true，你就可以從最后一張圖片滑動到第一張圖片。當幻燈片少于3張時，選項總為false。
此選項與箭頭導航無關，箭頭循環是永久打開的。你可以通過自定義UI來修改此行為。

捏關閉畫廊pinchToClose

手指內聚（捏）是關閉畫廊的手勢。畫廊的背景會隨著用戶的捏而逐漸淡出，當手勢完成后（兩個手指捏到一起時），畫廊將關閉。

滾動關閉畫廊closeOnScroll

在滾動頁面上關閉畫廊。 選項只適用于沒有硬件觸摸支持的設備。

垂直拖放關閉畫廊closeOnVerticalDrag

當垂直拖放和圖像不放大時關閉畫廊。使用鼠標時，該選項的值總為false。

預定義是否使用鼠標mouseUsed

預定義是否使用鼠標。一些PhotoSwipe特性依賴它，例如：默認的UI左右箭頭，只有在使用鼠標時才會出現。如果設置為false，PhotoSwipe將檢測何時使用鼠標，找到鼠標時，觸發mouseUsed事件。

按esc鍵關閉畫廊escKey

按鍵盤esc鍵關閉畫廊，該選項是可以被動態改變的。（ yourPhotoSwipeInstance.options.escKey = false;）

鍵盤左右箭頭導航，arrowKeys默認false

鍵盤左右箭頭導航，該選項是可以被動態改變的。（yourPhotoSwipeInstance.options.arrowKeys = false;）

是否記錄歷史history

如果設置為false，則禁用歷史紀錄模塊（后退按鈕用于關閉圖庫，每張幻燈片的URL都是唯一的）。
當然，你如果使用的是構建打包工具，也可以從構建中移除history.js模塊。

圖庫唯一IDgalleryUID

圖庫唯一ID，歷史模塊在形成URL時使用。
例如：圖庫的第二張圖像的URL可能是：http://example.com/#gid=1&pid=2

圖庫項唯一IDgalleryPIDs

每個圖庫項的自定義ID被用于形成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=imge-two
在 FAQ 部分了解更多關于如何實現自定義 PID 的信息。

錯誤信息errorMsg

圖像未加載時出現錯誤信息。%URL%將被圖像的 URL 替換。

默認值：

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

預加載數組preload

根據移動方向延遲加載附近的幻燈片。應該是一個帶有兩個整數的數組，一個整數是當前圖庫項之前要預加載的圖像數，第二個整數是當前圖庫項之后要預加載的圖像數。

例如：如果你將其設置為[1, 3],它將在當前圖像之前預加載一個圖像，之后預加載3個圖像。最小值不能小于1。

添加到PhotoSwipe根元素上的類mainClass

帶有類名的字符串，該類名將被添加到 PhotoSwipe 的根元素（ .Pswp ). 值可以包含以空格分隔的多個類名。

獲取圖像總數getNumItemsFn

該函數返回圖庫中的項目總數。默認情況下，它返回幻燈片數組的長度。不要把非常復雜的代碼放在這里，函數執行（executed）的非常頻繁。

聚焦focus布爾值

圖庫打開后，設置對PhotoSwipe元素的焦點。

點擊元素函數isClickableElement

默認值：

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

函數應該檢查元素是否可點擊。如果被檢測元素可以被點擊，則PhotoSwipe不會調用 preventDefault，click事件將會允許執行。
函數應該盡可能做到代碼簡潔，因為它是圖像拖動開始和拖動釋放的過程中，多次被執行。

模態modal布爾值

控制PhotoSwipe是否應該擴展以占用整個視區。如果為false，PhotoSwipe元素將采用模板定位父元素的大小。更多信息請看FAQ

默認用戶界面選項

作為核心選項，options 的PhotoSwipeUI_Default( 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 elementreturn shareButtonOut; }

總結

以上是生活随笔為你收集整理的PhotoSwipe之参数options（3）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。