PhotoSwipe之API（4）

原文地址，点击直达，阅读效果更佳

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

动态添加图库项

在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方法之前操作。
至少保留一个图库项
这种技术常常用来服务响应式图片

PhotoSwipe之API（4）相关推荐

PhotoSwipe 官方API解读（一）
一:getting started 开始之前要知道: 1. PhotoSwipe需要提前预定义图片的大小(more: http://photoswipe.com/documentation/faq.h ...
js-PhotoSwipe相册功能
PhotoSwipe.js官网:http://photoswipe.com/ ,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的. 1.导入依赖的 ...
pc端jquery左右按钮控制带缩略图的图片切换代码_Web开发实用的图片预览插件，简单零依赖——PhotoSwipe...
介绍 PhotoSwipe是一个JavaScript库,没有依赖项.要说唯一的依赖项那就是Vanilla.js(原生js),因此你可以在你的任何Web项目中使用,包括主流的Vue.React.Angu ...
photoswipe 移动端PC端兼容图片相册预览
由于安卓项目涉及到h5页面嵌入,需要查看图片相册集,本来打算使用baguetteBox,但是它不太兼容手机,并且页面效果跟灵活性欠缺,后来在文档中看到PhotoSwipe,虽然开发者很懒,好多东西东西 ...
PhotoSwipe.js 相册展示插件学习
PhotoSwipe.js官网:http://photoswipe.com/ ,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. ...
利用PhotoSwipe进行完成图片预览功能
在类似于朋友圈动态中,时常会配有图片,但是图片常常不能展示完全,所以需要放大来浏览图片. 今天利用PhotoSwipe进行图片预览的功能: 首先放出PhotoSwipe的github地址:PhotoS ...
移动端使用PhotoSwipe 图片放大浏览
先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经 ...
PhotoSwipe入门（2）
原文地址,点击直达,阅读效果更佳开始之前 PhotoSwipe不像jquery插件那样简单.你需要有一些javascript基础. PhotoSwipe需要预定义图片的尺寸(more about t ...
PhotoSwipe介绍（1）
原文地址,点击直达,阅读效果更佳介绍纯js画廊 (gallery),没有依赖性(dependencies),侧重移动端. API文档 Github地址 Twitter主页画廊风格所有控件(Al ...

PhotoSwipe之API（4）

API介绍

方法

属性

事件

可用的事件

动态添加图库项

PhotoSwipe之API（4）相关推荐

最新文章

热门文章