PhotoSwipe plug-in can realize full screen zoom in on the mobile phone and double-click on the image to enlarge the image.
PhotoSwipe plugin official website http://www.photoswipe.com/
But one thing is not good about it. After zooming in on the picture, you cannot close the browsing. You have to click the close button or slide to close it. After searching for a long time, you still haven't mentioned this point. You can only change it yourself.
Open photoswipe.js, there is a function definition about tap on line 3179
Define a variable at the beginning
var tap_num = 0;
Then add it in the definition of onTapStart
//Add to the S you add by yourself according to the needs//Document whether to click or double-click to close Double-click to enlarge tap_num++; if(tap_num < 2){ setTimeout(function(){ if(tap_num > 1){ tap_num = 0; return; }else{ tap_num = 0; //Defend whether there is drag or not. If there is dragging, close if(_isDragging){ return; }else{ self.close(); } } } },200);}//Add to the E you add by yourself according to the needsProbably that's the whole
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; } //Add S by yourself according to your needs //Display whether to click or double-click to close Double-click to enlarge tap_num++; if(tap_num < 2){ setTimeout(function(){ if(tap_num > 1){ tap_num = 0; return; }else{ tap_num = 0; //Display whether there is drag or not. If there is dragging, close if(_isDragging){ return; }else{ self.close(); } } } } },200); } //Add E by yourself }, onTapRelease: function(e, releasePoint) { if(!releasePoint) { return; } if(!_moved && !_isMultitouch && !_numAnimations) { var p0 = releasePoint; if(tapTimer) { clearTimeout(tapTimer); tapTimer = null; // Check if tapped on the same place if ( _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-tap if(clickedTagName === 'BUTTON' || framework.hasClass(e.target, 'pswp__single-tap') ) { _dispatchTapEvent(e, releasePoint); return; } _equalizePoints(tapReleasePoint, p0); tapTimer = setTimeout(function() { _dispatchTapEvent(e, releasePoint); return; } _equalizePoints(tapReleasePoint, p0); tapTimer = setTimeout(function() { _dispatchTapEvent(e, releasePoint); tapTimer = null; }, 300); } } }});Compress the modified photoswipe.js to realize the functions you want
In addition, using photoswipe plugin requires inserting frameworks and JavaScript code, which can be integrated into one js and then introduced, so that the page looks much simpler.
First write the picture album structure on the html and match the style
<div id="demo-test-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" /> </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" /> </a></div>
Organized 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(" <!-- Background of PhotoSwipe.");document.writeln(" It/'sa 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(" <!-- 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__item/"></div>");document.writeln(" <div class=/"pswp__item/"></div>");document.writeln(" <div class=/"pswp__item/"></div>");document.writeln(" <div class=/"pswp__item/"></div>");document.writeln("");document.writeln("");document.writeln("");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(" <!-- 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(" <!-- 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__cut/">");document.writeln(" <div class=/"pswp__preloader__donut/"></div>");document.writeln(" </div>");document.writeln(" </div>");document.writeln(" </div>");document.writeln(" </div>");document.writeln(" </div>");document.writeln(" <div class=/"pswp__share-modal pswp__single-tap/">");document.writeln(" <div class=/"pswp__share-modal 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(" </div>");document.writeln("");document.writeln(" <div class=/"pswp__caption/">");document.writeln(" <div class=/"pswp__caption__center/"></div>");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");document.writeln("");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 nodes if(el.nodeType !== 1) { continue; } childrenElements = el.children; size = el.getAttribute('data-size').split('x'); // create slide object item = { 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 getThumbBoundsFn if(childElements.length > 0) { item.msrc = childElements[0].getAttribute('src'); // thumbnail url if(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" image item.m = { src: mediumSrc, w: parseInt(size[0], 10), h: parseInt(size[1], 10) }; } // original image item.o = { src: item.src, w: item.w, h: item.h }; items.push(item); } return items; }; // find nearest parent element var 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=1 return 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 info var 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 bar options.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-url for(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 found if( isNaN(options.index) ) { return; } // Pass data to PhotoSwipe and initialize it gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); // see: http://photoswipe.com/documentation/responsive-images.html var 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.ow; item.h = item.oh; } else { item.src = item.m.src; item.w = item.mw; item.h = item.mh; } }); gallery.init(); }; // select all gallery elements var 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=1 var hashData = photoswipeParseHash(); if(hashData.pid && hashData.gid) { openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true ); } }; initPhotoSwipeFromDOM('.demo-gallery'); })();The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.