PhotoSwipe中文API(三)

http://photoswipe.com/documentation/api.html

所有的方法和这个网页上列出的属性是公开的。如果你想看看例子什么API可以做的，拿在默认PhotoSwipe UI源看看。

您可以初始化，例如在得到PhotoSwipe实例对象：

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关闭所有的人都将被清除。

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

Available events:

 // 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后删除幻灯片，你只需要修改的项目数组。例如，你可以把新的幻灯片对象到项目数组：

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

如果更改幻灯片是CURRENT，NEXT或PREVIOUS（你应该尽量避免） - 你需要调用方法，将更新的内容：

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

否则，你不需要做任何事情。除非，也许，调用pswp.ui.update（）如果你想默认用户界面的某些部分进行更新（例如，“1×的”计数器）。还要注意：

您不能将整个数组，你只能修改（例如用剪接删除元素）。

如果你想删除当前幻灯片 - 之前调用GOTO方法。

必须有至少一个滑动。

这种技术被用来服务响应图像。