原文位址,點選直達,閱讀效果更佳
API介紹
在這個頁面上,列出的所有方法和屬性都是公共的。如果你想看看API能做什麼的例子,請進入
PhotoSwipe
預設UI源碼頁。
初始化後,你可以得到一個
PhotoSwipe
執行個體。
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使用了非常簡單的事件/通訊系統。該系統有兩個方法,第一個是
shout
用來觸發事件(triggers event),第二個是
listen
用來監聽事件。沒有解綁事件的方法,但是在
PhotoSwipe
被關閉時,所有這些都會被清除。
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 viewport
gap.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 events
preventObj.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
});
動态添加圖庫項
在PhotoSwipe被打開後,如果你想添加,編輯或删除圖庫項,你隻需要修改
items
數組。
例如:你可以建立一個新的
slide
對象
push
到
items
數組中。
pswp.items.push({
src: "path/to/image.png",
w: 1200,
h: 500
})
如果你改變了目前/下一個/上一個圖庫項(應盡量避免這樣做),你必須調用它們的内容更新方法
// sets a flag that slides should be updated
pswp.invalidateCurrItems();
// updates the content of slides
pswp.updateSize(true);
否則,你什麼都不用做。除非你想部分預設UI更新,可以調用
pswp.ui.update()
,其他注意項:
- 你不能再配置設定整個數組,你隻能修改它。(例如:使用
去移除元素)splice
- 如果你要删除目前圖庫項,請在調用
方法之前操作。goto
- 至少保留一個圖庫項
- 這種技術常常用來服務響應式圖檔