當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

PhotoSwipe之API（4）

發布時間：2024/3/24 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 PhotoSwipe之API（4）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文地址，點擊直達，閱讀效果更佳

API介紹

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

初始化后，你可以得到一個PhotoSwipe實例。

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

方法

屬性

// 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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：符号表 C++
下一篇： AI之边缘计算、雾计算云计算技术分析