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

API介紹

在這個(gè)頁面上，列出的所有方法和屬性都是公共的。如果你想看看API能做什么的例子，請進(jìn)入PhotoSwipe默認(rèn)UI源碼頁。

初始化后，你可以得到一個(gè)PhotoSwipe實(shí)例。

var photoswipeInstance = new PhotoSwipe(/*...*/);

方法

var pswp = new PhotoSwipe( /* ... */ );// Initialize and open gallery // (you can bind events before this method) pswp.init();// Go to slide by index // @param {int} `index` pswp.goTo(index);// Go to the next slide pswp.next();// Go to the previous slide pswp.prev();// Update gallery size // @param {boolean} `force` If you set it to `true`, // size of the gallery will be updated // even if viewport size hasn't changed. pswp.updateSize(force);// Close gallery pswp.close();// Destroy gallery, // automatically called after close() pswp.destroy()// Zoom current slide to (optionally with animation) // @param {number} `destZoomLevel` Destination scale number. 1 - original. // pswp.currItem.fitRatio - image will fit into viewport. // @param {object} `centerPoint` Object of x and y coordinates, relative to viewport. // @param {int} `speed` Animation duration. Can be 0. // @param {function} `easingFn` Easing function (optional). Set to false to use default easing. // @param {function} `updateFn` Function will be called on each update frame. (optional) // // Example below will 2x zoom to center of slide: // pswp.zoomTo(2, {x:pswp.viewportSize.x/2,y:pswp.viewportSize.y/2}, 2000, false, function(now) { // // }); pswp.zoomTo(destZoomLevel, centerPoint, speed, easingFn, updateFn);// Apply zoom and pan to the current slide // // @param {number} `zoomLevel` // @param {int} `panX` // @param {int} `panY` // // For example: `pswp.applyZoomPan(1, 0, 0)` // will zoom current image to the original size // and will place it on top left corner // // pswp.applyZoomPan(zoomLevel, panX, panY);

屬性

// current slide object pswp.currItem// items array (slides, images) pswp.items// size of sliding viewport pswp.viewportSize// object holds all functions from framework // framework-bridge.js pswp.framework// UI object (e.g. PhotoSwipeUI_Default instance) pswp.ui// background element (pswp__bg) pswp.bg// container element (pswp__container) pswp.container// options pswp.options// Even though methods below aren't technically properties, we list them here:// current item index (int) pswp.getCurrentIndex();// total number of items pswp.options.getNumItemsFn()// current zoom level (number) pswp.getZoomLevel();// one (or more) pointer is used pswp.isDragging();// two (or more) pointers are used pswp.isZooming();// `true` when transition between is running (after swipe) pswp.isMainScrollAnimating();

事件

PhotoSwipe使用了非常簡單的事件/通訊系統(tǒng)。該系統(tǒng)有兩個(gè)方法，第一個(gè)是shout用來觸發(fā)事件（triggers event）,第二個(gè)是listen用來監(jiān)聽事件。沒有解綁事件的方法，但是在PhotoSwipe被關(guān)閉時(shí)，所有這些都會(huì)被清除。

var pswp = new PhotoSwipe(/* ... */);// Listen for "helloWorld" event pswp.listen('helloWorld', function(name) {alert('Name is: ' + name); });// Trigger "helloWorld" event pswp.shout('helloWorld', 'John' /* you may pass more arguments */);

可用的事件

// Before slides change // (before the content is changed, but after navigation) // Update UI here (like "1 of X" indicator) pswp.listen('beforeChange', function() { });// After slides change // (after content changed) pswp.listen('afterChange', function() { });// Image loaded pswp.listen('imageLoadComplete', function(index, item) { // index - index of a slide that was loaded// item - slide object });// Viewport size changed pswp.listen('resize', function() { });// Triggers when PhotoSwipe "reads" slide object data, // which happens before content is set, or before lazy-loading is initiated. // Use it to dynamically change properties pswp.listen('gettingData', function(index, item) {// index - index of a slide that was loaded// item - slide object// e.g. change path to the image based on `something`if( something ) {item.src = item.something;} else {item.src = item.somethingElse;} });// Mouse was used (triggers only once) pswp.listen('mouseUsed', function() { });// Opening zoom in animation starting pswp.listen('initialZoomIn', function() { });// Opening zoom in animation finished pswp.listen('initialZoomInEnd', function() { });// Closing zoom out animation started pswp.listen('initialZoomOut', function() { });// Closing zoom out animation finished pswp.listen('initialZoomOutEnd', function() { });// Allows overriding vertical margin for individual items pswp.listen('parseVerticalMargin', function(item) { // For example:var gap = item.vGap;gap.top = 50; // There will be 50px gap from top of viewportgap.bottom = 100; // and 100px gap from the bottom })// Gallery starts closing pswp.listen('close', function() { });// Gallery unbinds events // (triggers before closing animation) pswp.listen('unbindEvents', function() { });// After gallery is closed and closing animation finished. // Clean up your stuff here. pswp.listen('destroy', function() { });// Called when the page scrolls. // The callback is passed an offset with properties {x: number, y: number}. // // PhotoSwipe uses the offset to determine the top-left of the template, // which by default is the top-left of the viewport. When using modal: false, // you should listen to this event (before calling .init()) and modify the offset // with the template's getBoundingClientRect(). // // Look at the "Implementing inline gallery display" FAQ section for more info. pswp.listen('updateScrollOffset', function(_offset) {var r = gallery.template.getBoundingClientRect();_offset.x += r.left;_offset.y += r.top; });// PhotoSwipe has a special event called pswpTap. // It's dispatched using default JavaScript event model. // So you can, for example, call stopPropagation on it. // pswp.framework.bind - is a shorthand for addEventListener pswp.framework.bind( pswp.scrollWrap /* bind on any element of gallery */, 'pswpTap', function(e) {console.log('tap', e, e.detail);// e.detail.origEvent // original event that finished tap (e.g. mouseup or touchend)// e.detail.target // e.target of original event// e.detail.releasePoint // object with x/y coordinates of tap// e.detail.pointerType // mouse, touch, or pen });// Allow to call preventDefault on down and up events pswp.listen('preventDragEvent', function(e, isDown, preventObj) {// e - original event// isDown - true = drag start, false = drag release// Line below will force e.preventDefault() on:// touchstart/mousedown/pointerdown events// as well as on:// touchend/mouseup/pointerup eventspreventObj.prevent = true; });// Default UI events // -------------------------// Share link clicked pswp.listen('shareLinkClick', function(e, target) { // e - original click event// target - link that was clicked// If `target` has `href` attribute and // does not have `download` attribute - // share modal window will popup });

動(dòng)態(tài)添加圖庫項(xiàng)

在PhotoSwipe被打開后，如果你想添加，編輯或刪除圖庫項(xiàng)，你只需要修改items數(shù)組。
例如：你可以創(chuàng)建一個(gè)新的slide對象push到items數(shù)組中。

pswp.items.push({src: "path/to/image.png",w: 1200,h: 500 })

如果你改變了當(dāng)前/下一個(gè)/上一個(gè)圖庫項(xiàng)（應(yīng)盡量避免這樣做），你必須調(diào)用它們的內(nèi)容更新方法

// sets a flag that slides should be updated pswp.invalidateCurrItems(); // updates the content of slides pswp.updateSize(true);

否則，你什么都不用做。除非你想部分默認(rèn)UI更新，可以調(diào)用pswp.ui.update(),其他注意項(xiàng)：

• 你不能再分配整個(gè)數(shù)組，你只能修改它。（例如：使用splice去移除元素）
• 如果你要?jiǎng)h除當(dāng)前圖庫項(xiàng)，請?jiān)谡{(diào)用goto方法之前操作。
• 至少保留一個(gè)圖庫項(xiàng)
• 這種技術(shù)常常用來服務(wù)響應(yīng)式圖片

總結(jié)

以上是生活随笔為你收集整理的PhotoSwipe之API（4）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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