PhotoSwipe插件官方網(wǎng)站 http://www.photoswipe.com/

PhotoSwipe插件能實現(xiàn)手機端點擊圖片全屏放大 再雙擊圖片放大等功能

但有一點不太好的是圖片放大后再單擊不能關(guān)閉瀏覽，要點擊關(guān)閉按鈕或者滑動才能關(guān)閉，找了好久配置項都沒說到這點上的，只能自己動手改了。

打開photoswipe.js，大概在3179行有個關(guān)于tap的函數(shù)定義
在開頭先定義一個變量

var tap_num = 0;

然后在onTapStart的定義里加入

//根據(jù)需求自己添加的S //判斷是單擊還是雙擊 單擊關(guān)閉 雙擊放大 tap_num++; if(tap_num < 2){setTimeout(function(){if(tap_num > 1){tap_num = 0;return;}else{tap_num = 0;//判斷是否有拖拽 如有拖拽觸發(fā)拖拽事件 沒有則關(guān)閉if(_isDragging){return;}else{self.close();}}},200); } //根據(jù)需求自己添加的E

大概整體就是這樣

var tapTimer,tapReleasePoint = {},_dispatchTapEvent = function(origEvent, releasePoint, pointerType) { var e = document.createEvent( 'CustomEvent' ),eDetail = {origEvent:origEvent, target:origEvent.target, releasePoint: releasePoint, pointerType:pointerType || 'touch'};e.initCustomEvent( 'pswpTap', true, true, eDetail );origEvent.target.dispatchEvent(e);}; var tap_num = 0;_registerModule('Tap', {publicMethods: {initTap: function() {_listen('firstTouchStart', self.onTapStart);_listen('touchRelease', self.onTapRelease);_listen('destroy', function() {tapReleasePoint = {};tapTimer = null;});},onTapStart: function(touchList) {if(touchList.length > 1) {clearTimeout(tapTimer);tapTimer = null;}//根據(jù)需求自己添加的S//判斷是單擊還是雙擊 單擊關(guān)閉 雙擊放大tap_num++;if(tap_num < 2){setTimeout(function(){if(tap_num > 1){tap_num = 0;return;}else{tap_num = 0;//判斷是否有拖拽 如有拖拽觸發(fā)拖拽事件 沒有則關(guān)閉if(_isDragging){return;}else{self.close();}}},200);}//根據(jù)需求自己添加的E},onTapRelease: function(e, releasePoint) {if(!releasePoint) {return;}if(!_moved && !_isMultitouch && !_numAnimations) {var p0 = releasePoint;if(tapTimer) {clearTimeout(tapTimer);tapTimer = null;// Check if taped on the same placeif ( _isNearbyPoints(p0, tapReleasePoint) ) {_shout('doubleTap', p0);return;}}if(releasePoint.type === 'mouse') {_dispatchTapEvent(e, releasePoint, 'mouse');return;}var clickedTagName = e.target.tagName.toUpperCase();// avoid double tap delay on buttons and elements that have class pswp__single-tapif(clickedTagName === 'BUTTON' || framework.hasClass(e.target, 'pswp__single-tap') ) {_dispatchTapEvent(e, releasePoint);return;}_equalizePoints(tapReleasePoint, p0);tapTimer = setTimeout(function() {_dispatchTapEvent(e, releasePoint);tapTimer = null;}, 300);}}} });

把修改后的photoswipe.js壓縮一下，就能實現(xiàn)自己想要的功能了

另外，使用photoswipe插件需要插入框架和JavaScript代碼，可以把這些代碼整合成一個js再引入，這樣頁面看起來就簡潔了很多。
先在html寫上圖片相冊結(jié)構(gòu)，并配上樣式

<div id="demo-test-gallery" class="demo-gallery"><a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024"><img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" /></a><a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024"><img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" /></a> </div>

整理后的js

document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->"); document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">"); document.writeln(""); document.writeln(" <!-- Background of PhotoSwipe."); document.writeln(" It\'s a separate element as animating opacity is faster than rgba(). -->"); document.writeln(" <div class=\"pswp__bg\"><\/div>"); document.writeln(""); document.writeln(" <!-- Slides wrapper with overflow:hidden. -->"); document.writeln(" <div class=\"pswp__scroll-wrap\">"); document.writeln(""); document.writeln(" <!-- Container that holds slides."); document.writeln(" PhotoSwipe keeps only 3 of them in the DOM to save memory."); document.writeln(" Don\'t modify these 3 pswp__item elements, data is added later on. -->"); document.writeln(" <div class=\"pswp__container\">"); document.writeln(" <div class=\"pswp__item\"><\/div>"); document.writeln(" <div class=\"pswp__item\"><\/div>"); document.writeln(" <div class=\"pswp__item\"><\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->"); document.writeln(" <div class=\"pswp__ui pswp__ui--hidden\">"); document.writeln(""); document.writeln(" <div class=\"pswp__top-bar\">"); document.writeln(""); document.writeln(" <!-- Controls are self-explanatory. Order can be changed. -->"); document.writeln(""); document.writeln(" <div class=\"pswp__counter\"><\/div>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>"); document.writeln(""); document.writeln(" <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->"); document.writeln(" <!-- element will get class pswp__preloader--active when preloader is running -->"); document.writeln(" <div class=\"pswp__preloader\">"); document.writeln(" <div class=\"pswp__preloader__icn\">"); document.writeln(" <div class=\"pswp__preloader__cut\">"); document.writeln(" <div class=\"pswp__preloader__donut\"><\/div>"); document.writeln(" <\/div>"); document.writeln(" <\/div>"); document.writeln(" <\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">"); document.writeln(" <div class=\"pswp__share-tooltip\"><\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">"); document.writeln(" <\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">"); document.writeln(" <\/button>"); document.writeln(""); document.writeln(" <div class=\"pswp__caption\">"); document.writeln(" <div class=\"pswp__caption__center\"><\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <\/div>"); document.writeln(""); document.writeln("<\/div>");(function() {var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],el,childElements,thumbnailEl,size,item;for(var i = 0; i < numNodes; i++) {el = thumbElements[i];// include only element nodesif(el.nodeType !== 1) {continue;}childElements = el.children;size = el.getAttribute('data-size').split('x');// create slide objectitem = {src: el.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10),author: el.getAttribute('data-author')};item.el = el; // save link to element for getThumbBoundsFnif(childElements.length > 0) {item.msrc = childElements[0].getAttribute('src'); // thumbnail urlif(childElements.length > 1) {item.title = childElements[1].innerHTML; // caption (contents of figure)}}var mediumSrc = el.getAttribute('data-med');if(mediumSrc) {size = el.getAttribute('data-med-size').split('x');// "medium-sized" imageitem.m = {src: mediumSrc,w: parseInt(size[0], 10),h: parseInt(size[1], 10)};}// original imageitem.o = {src: item.src,w: item.w,h: item.h};items.push(item);}return items;};// find nearest parent elementvar closest = function closest(el, fn) {return el && ( fn(el) ? el : closest(el.parentNode, fn) );};var onThumbnailsClick = function(e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;var clickedListItem = closest(eTarget, function(el) {return el.tagName === 'A';});if(!clickedListItem) {return;}var clickedGallery = clickedListItem.parentNode;var childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for (var i = 0; i < numChildNodes; i++) {if(childNodes[i].nodeType !== 1) {continue;}if(childNodes[i] === clickedListItem) {index = nodeIndex;break;}nodeIndex++;}if(index >= 0) {openPhotoSwipe( index, clickedGallery );}return false;};var photoswipeParseHash = function() {var hash = window.location.hash.substring(1),params = {};if(hash.length < 5) { // pid=1return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if(!vars[i]) {continue;}var pair = vars[i].split('=');if(pair.length < 2) {continue;}params[pair[0]] = pair[1];}if(params.gid) {params.gid = parseInt(params.gid, 10);}return params;};var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements(galleryElement);// define options (if needed)options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {// See Options->getThumbBoundsFn section of docs for more infovar thumbnail = items[index].el.children[0],pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};},addCaptionHTMLFn: function(item, captionEl, isFake) {if(!item.title) {captionEl.children[0].innerText = '';return false;}captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';return true;}};// options for control baroptions.shareEl = false;options.fullscreenEl = false;if(fromURL) {if(options.galleryPIDs) {// parse real index when custom PIDs are used// http://photoswipe.com/documentation/faq.html#custom-pid-in-urlfor(var j = 0; j < items.length; j++) {if(items[j].pid == index) {options.index = j;break;}}} else {options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}// exit if index not foundif( isNaN(options.index) ) {return;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);// see: http://photoswipe.com/documentation/responsive-images.htmlvar realViewportWidth,useLargeImages = false,firstResize = true,imageSrcWillChange;gallery.listen('beforeResize', function() {var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;dpiRatio = Math.min(dpiRatio, 2.5);realViewportWidth = gallery.viewportSize.x * dpiRatio;if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {if(!useLargeImages) {useLargeImages = true;imageSrcWillChange = true;}} else {if(useLargeImages) {useLargeImages = false;imageSrcWillChange = true;}}if(imageSrcWillChange && !firstResize) {gallery.invalidateCurrItems();}if(firstResize) {firstResize = false;}imageSrcWillChange = false;});gallery.listen('gettingData', function(index, item) {if( useLargeImages ) {item.src = item.o.src;item.w = item.o.w;item.h = item.o.h;} else {item.src = item.m.src;item.w = item.m.w;item.h = item.m.h;}});gallery.init();};// select all gallery elementsvar galleryElements = document.querySelectorAll( gallerySelector );for(var i = 0, l = galleryElements.length; i < l; i++) {galleryElements[i].setAttribute('data-pswp-uid', i+1);galleryElements[i].onclick = onThumbnailsClick;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.demo-gallery');})();

總結(jié)

以上是生活随笔為你收集整理的手机端点击图片放大特效-PhotoSwipe插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。