PhotoSwipe v4 文档

var photoswipeInstance = new PhotoSwipe( /* ... / ); Methods 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);

Properties

// 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();

Events

PhotoSwipe使用非常简单的事件/消息系统。它有两个方法，喊（触发事件），听（处理事件）。对于现在还没有解除绑定监听方法，但是当PhotoSwipe关闭所有的人都将被清除。

// 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() { });