原文地址，點(diǎn)擊直達(dá)，閱讀效果更佳

Options

options是一個(gè)鍵值對(duì)對(duì)象，傳遞給PhotoSwipe的構(gòu)造函數(shù)。
例如：

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

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

獲取動(dòng)畫開始或結(jié)束時(shí)的對(duì)象坐標(biāo)getThumbBoundsFn

從最初的放大動(dòng)畫開始時(shí)（或從最后的縮小動(dòng)畫結(jié)束時(shí)），函數(shù)應(yīng)該返回一個(gè)對(duì)象坐標(biāo)。
對(duì)象包含三個(gè)屬性：

x：x坐標(biāo)，相對(duì)于document元素

y：y坐標(biāo)，相對(duì)于document元素

w：元素的寬度，高度基于最大圖像的尺寸自動(dòng)計(jì)算。

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

該getThumbBoundsFn函數(shù)有一個(gè)參數(shù)：打開（或關(guān)閉）畫廊的索引項(xiàng)。

在非模態(tài)模式下，模板的位置相對(duì)于視口（viewport）應(yīng)該減去x和y。更多信息：FAQ

下面是縮略圖位置計(jì)算的例子：

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 }

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

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

不透明轉(zhuǎn)換showHideOpacity:false

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

若要只啟用不透明（opacity）轉(zhuǎn)換(無縮放) ，請(qǐng)不要定義 getthumboundsfn 選項(xiàng)。

初始放大動(dòng)畫持續(xù)時(shí)間showAnimationDuration

初始放大動(dòng)畫持續(xù)時(shí)間，設(shè)置為0禁用。除了這個(gè)JS選項(xiàng)，你還需要修改 PhotoSwipe CSS 文件中的動(dòng)畫過渡持續(xù)時(shí)間:

.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變量的值。

結(jié)束縮放（關(guān)閉）動(dòng)畫持續(xù)時(shí)間hideAnimationDuration

與前一個(gè)選項(xiàng)相同，只是用于關(guān)閉(縮小)過渡。 photoSwipe打開后，pswp--openCSS類將添加到根元素，在CSS文件中，你可以使用這個(gè)類請(qǐng)求不同的過渡持續(xù)時(shí)間。

背景不透明度bgOpacity

背景（.pswp__bg）不透明度，應(yīng)該是從0到1的數(shù)字，例如：0.7，這個(gè)樣式是通過js定義的。因?yàn)檫@個(gè)值用于一些基于手勢(shì)的轉(zhuǎn)換。

幻燈片間距比spacing

例如：0.12，將呈現(xiàn)滑動(dòng)視窗寬度的12%（圓角）；

是否允許滑動(dòng)導(dǎo)航allowPanToNext: true

當(dāng)前圖庫項(xiàng)正被縮放時(shí)，允許滑動(dòng)導(dǎo)航到下一個(gè)/前一個(gè)圖庫項(xiàng)。在沒有硬件觸摸支持的設(shè)備(一般為手機(jī))上，選項(xiàng)總是false。

最大縮放級(jí)別maxSpreadZoom

執(zhí)行縮放手勢(shì)的最大縮放級(jí)別。2意味著圖像可以從原始尺寸被放大2倍。但是應(yīng)該盡量避免比較大的值，因?yàn)檫^大的圖像可能會(huì)導(dǎo)致移動(dòng)設(shè)備的內(nèi)存問題（尤其是IOS）

雙擊手勢(shì)放大圖像后與之前的圖像的縮放級(jí)別getDoubleTapZoom

在雙擊手勢(shì)（或當(dāng)用戶單擊縮放圖標(biāo)或鼠標(biāo)單擊圖像本身時(shí)）圖像放大后，函數(shù)應(yīng)該返回縮放級(jí)別。
如果返回1，圖像將被放大到原來的大小。

默認(rèn)值：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;} }

函數(shù)在每次啟動(dòng)放大動(dòng)畫時(shí)調(diào)用。因此，可以根據(jù)不同圖像的大小或屏幕DPI自由的返回不同的值。

循環(huán)loop

使用滑動(dòng)手勢(shì)時(shí)循環(huán)滑動(dòng)。如果設(shè)置為true，你就可以從最后一張圖片滑動(dòng)到第一張圖片。當(dāng)幻燈片少于3張時(shí)，選項(xiàng)總為false。
此選項(xiàng)與箭頭導(dǎo)航無關(guān)，箭頭循環(huán)是永久打開的。你可以通過自定義UI來修改此行為。

捏關(guān)閉畫廊pinchToClose

手指內(nèi)聚（捏）是關(guān)閉畫廊的手勢(shì)。畫廊的背景會(huì)隨著用戶的捏而逐漸淡出，當(dāng)手勢(shì)完成后（兩個(gè)手指捏到一起時(shí)），畫廊將關(guān)閉。

滾動(dòng)關(guān)閉畫廊closeOnScroll

在滾動(dòng)頁面上關(guān)閉畫廊。 選項(xiàng)只適用于沒有硬件觸摸支持的設(shè)備。

垂直拖放關(guān)閉畫廊closeOnVerticalDrag

當(dāng)垂直拖放和圖像不放大時(shí)關(guān)閉畫廊。使用鼠標(biāo)時(shí)，該選項(xiàng)的值總為false。

預(yù)定義是否使用鼠標(biāo)mouseUsed

預(yù)定義是否使用鼠標(biāo)。一些PhotoSwipe特性依賴它，例如：默認(rèn)的UI左右箭頭，只有在使用鼠標(biāo)時(shí)才會(huì)出現(xiàn)。如果設(shè)置為false，PhotoSwipe將檢測(cè)何時(shí)使用鼠標(biāo)，找到鼠標(biāo)時(shí)，觸發(fā)mouseUsed事件。

按esc鍵關(guān)閉畫廊escKey

按鍵盤esc鍵關(guān)閉畫廊，該選項(xiàng)是可以被動(dòng)態(tài)改變的。（ yourPhotoSwipeInstance.options.escKey = false;）

鍵盤左右箭頭導(dǎo)航，arrowKeys默認(rèn)false

鍵盤左右箭頭導(dǎo)航，該選項(xiàng)是可以被動(dòng)態(tài)改變的。（yourPhotoSwipeInstance.options.arrowKeys = false;）

是否記錄歷史history

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

圖庫唯一IDgalleryUID

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

圖庫項(xiàng)唯一IDgalleryPIDs

每個(gè)圖庫項(xiàng)的自定義ID被用于形成URL。如果設(shè)置為true，則幻燈片對(duì)象必須具有可以是字符串或整數(shù)的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 部分了解更多關(guān)于如何實(shí)現(xiàn)自定義 PID 的信息。

錯(cuò)誤信息errorMsg

圖像未加載時(shí)出現(xiàn)錯(cuò)誤信息。%URL%將被圖像的 URL 替換。

默認(rèn)值：

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

預(yù)加載數(shù)組preload

根據(jù)移動(dòng)方向延遲加載附近的幻燈片。應(yīng)該是一個(gè)帶有兩個(gè)整數(shù)的數(shù)組，一個(gè)整數(shù)是當(dāng)前圖庫項(xiàng)之前要預(yù)加載的圖像數(shù)，第二個(gè)整數(shù)是當(dāng)前圖庫項(xiàng)之后要預(yù)加載的圖像數(shù)。

例如：如果你將其設(shè)置為[1, 3],它將在當(dāng)前圖像之前預(yù)加載一個(gè)圖像，之后預(yù)加載3個(gè)圖像。最小值不能小于1。

添加到PhotoSwipe根元素上的類mainClass

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

獲取圖像總數(shù)getNumItemsFn

該函數(shù)返回圖庫中的項(xiàng)目總數(shù)。默認(rèn)情況下，它返回幻燈片數(shù)組的長(zhǎng)度。不要把非常復(fù)雜的代碼放在這里，函數(shù)執(zhí)行（executed）的非常頻繁。

聚焦focus布爾值

圖庫打開后，設(shè)置對(duì)PhotoSwipe元素的焦點(diǎn)。

點(diǎn)擊元素函數(shù)isClickableElement

默認(rèn)值：

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

函數(shù)應(yīng)該檢查元素是否可點(diǎn)擊。如果被檢測(cè)元素可以被點(diǎn)擊，則PhotoSwipe不會(huì)調(diào)用 preventDefault，click事件將會(huì)允許執(zhí)行。
函數(shù)應(yīng)該盡可能做到代碼簡(jiǎn)潔，因?yàn)樗菆D像拖動(dòng)開始和拖動(dòng)釋放的過程中，多次被執(zhí)行。

模態(tài)modal布爾值

控制PhotoSwipe是否應(yīng)該擴(kuò)展以占用整個(gè)視區(qū)。如果為false，PhotoSwipe元素將采用模板定位父元素的大小。更多信息請(qǐng)看FAQ

默認(rèn)用戶界面選項(xiàng)

作為核心選項(xiàng)，options 的PhotoSwipeUI_Default( dist/ui/photoswipe-ui-default.js )屬性將以相同的方式添加到相同的對(duì)象。

// 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; }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。