Haga clic en la imagen para ampliar el complemento de efectos especiales Photoswipe.js para implementar

El complemento de Photoswipe puede realizar una pantalla completa en el teléfono móvil y hacer doble clic en la imagen para ampliar la imagen.

Photoswipe Plugin Sitio web oficial http://www.photoswipe.com/

Pero una cosa no es buena al respecto. Después de acercarse a la imagen, no puede cerrar la navegación. Debe hacer clic en el botón Cerrar o deslizarse para cerrarlo. Después de buscar mucho tiempo, todavía no ha mencionado este punto. Solo puedes cambiarlo tú mismo.

Abra Photoswipe.js, hay una definición de función sobre Tap On Line 3179

Definir una variable al principio

var tap_num = 0;

Luego agrégalo en la definición de OnTapStart

 // Agregue a la S que agregue usted mismo de acuerdo con las necesidades // documento si hace clic o hace doble clic para cerrar el doble clic para ampliar TAP_NUM ++; if (tap_num <2) {setTimeOut (function () {if (tap_num> 1) {tap_num = 0; return;} else {tap_num = 0; // defender si hay arrastre o no. Si hay arrastre, cierre if (_isdragging) {return;} else {self.close ();}}}, 200);}; usted mismo de acuerdo con las necesidades

Probablemente ese sea el conjunto

 var tapTimer, tapreleasePoint = {}, _dispatchtapevent = function (origeVent, releasePoint, pointerType) {var e = document.createEvent ('customent'), edetail = {OrigeVent: OrigeVent, Target: OrientVent.Target, ReleasePoint: ReleasePoint, PointerType: PointerTypeTypeTypeTypeTypeStyPe 'tocar' }; E.InitCustomEvent ('PSWPTAP', verdadero, verdadero, edetail); origeVent.target.dispatcheVent (e); }; var tap_num = 0; _registerModule ('tap', {publicMethods: {inItTap: function () {_Listen ('FirstTouchStart', self.ontAtt); _listen ('touchRelease', self.ontapRelease); _listen ('destruye function () {tapReleasePoint =} }); 1) {tap_num = 0; {return; p0) 'Botón' || _equalizePoints (TapReleasePoint, P0);

Comprimir el modificado Photoswipe.js para realizar las funciones que desea

Además, el uso del complemento Photoswipe requiere insertar marcos y código JavaScript, que puede integrarse en uno JS y luego introducirse, de modo que la página se vea mucho más simple.

Primero escriba la estructura del álbum de imágenes en el HTML y coincida con el estilo

 <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_b61960af0af data-size = "1600x1068" data-med = "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-medsize = "1024x1024"> <img src = "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"/> </a> </div>

JS organizado

 document.WriteLn ("<!-Elemento raíz de Photoswipe. Debe tener la clase PSWP.->"); document.writeLn ("<div class =/" pswp/"tabindex =/"-1/"role =/" dialog/"aria-hidden =/" true/">"); document.writeLn ("<! La opacidad de animación es más rápida que rgba (). class =/"pswp__scroll-wrap/"> "); document.writeLn (" <!-Container que contiene diapositivas "); document.writeLn (" Photoswipe solo guarda 3 de ellos en el DOM para guardar la memoria "); document.writeln (" don/'t modifica estos 3 pswp__item elementos, los datos se agregan más adelante.-> "); Document. class =/"PSWPP__Item/"> </div> "); document.writeLn (" <div class =/"pswp__item/"> </div> "); document.writeLn (" <div class =/"pswp__item/"> </div> "); document.writeln (" <DivId class =/"pswp__item/"> </div> "); document.writeLn (" "); document.writeLn (" "); document.writeLn (" "); document.writeLn (" "); document.writeLn (" <!-default (Photoswipeui_default) interfaz en la parte superior del área de deslizamiento. class =/"pswp__ui pswp__ui--hidden/"> "); document.writeLn (" "); document.writeLn (" <!-Los controles se explican por sí mismos. Se puede cambiar el orden.-> "); document.writeLn (" "); document.writeLn (" <Diviv 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 =" pSwut> "); pswp__Button-share/"title =/" share/"> <// button>"); document.writeLn (""); document.writeLn ("<button class =/" pswp__Button pswp__Button-fs/"title =/" fullscreen/"> <// button>"); document.writeln ("); document.wrwriteln (" <!-"< Preloader Demo http:////codepen.io//dimsemenov//pen//yybwor-> "); document.writeLn (" <!-Element obtendrá la clase PSWP__PReloader-Activa cuando Preloader está ejecutando-> "); Document.WriteLn (" <Div Div class =/"PSWP__Preloader/"> "); document.WriteLn (" <div class =/"pswp__preloader__icn/"> "); document.writeLn (" <div class =/"pswp__preloader__cut/"> "); document.writeLn (" <diviv class =/"pswp__preloader__cut/"> "); document.writeLn (" <div class =/"pswp__preloader__donut/"> </div> "); document.writeLn (" </div> "); document.writeLn (" </div> "); document.writeln (" </div> "); document.wrwrwrit (" " </div> "); document.writeLn (" </div> "); document.writeLn (" <div class =/"pswp__share-modal pswp__singlele-tap/"> "); document.writeLn (" <div class =/"pswp__share-modal Pswp__single-tap/"> "); class =/"pswp__share-tooltip/"> </div> "); document.writeLn (" </div> "); document.writeLn (" "); document.writeLn (" <button class =/"pswp__Button pswp__Button--arroz-jott/" title =/"anteriormente (Arrow Left)/"> "); Document.writeln (" ". </boton> "); document.writeLn (" "); document.writeLn (" <button class =/"pswp__Button pswp__Button-arrow--right/" title =/"next (flecha derecha)/"> "); document.writeln (" </div> "); document.writeln ("); document.writeln ("<diviteln class =/"pswp__caption/"> "); document.writeLn (" <divir class =//"pswp__caption__center/"> </div> "); document.writeLn (" "); document.writeLn (" "); document.writeln (" "); document.writeLn (" "); document.writeln ("); document.writeln (""); docum ent.WriteLn (""); document.WriteLn (""); document.writeLn (""); document.writeln (""); document.writeln (""); document.writeLn ("); document.writeln (" "); document.writeln (" "); document.w riteln (""); document.WriteLn (""); document.writeLn (""); document.writeLn (""); document.writeln (""); document.writeLn ("); document.writeln (" "); document.writeln ("); document.write ln (""); 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, tamaño, elemento; El.getAttribute ('href'), w: parseInt (size [0], 10), h: parseInt (size [1], 10), autor: el.getattribute ('data-author')}; ChildElements [0] .getAttribute ('src'); El.getAttribute ('Data-Med-Size'). Split ('X'); / / Medium size "Item.m = {src: mediumSrc, w: parseInt (size [0], 10), h: parseint (size [1], 10)} // IMAGEN original. items.push (item); = falso varget = e.Target || NumchildNodes = ChildNodes.length, NodeIndex = 0, para (Var i = 0; i <numchildNodes; i ++) {if (childNodes [i] .nodeType! == 1) {continuar 0) {OpenPhotoswipe (index, clickEdgallery); i <var.length; OpenPhotoswipe = function (index, GalleryElement, DisableEnimation, fromurl) {var pswpelement = document.queryselectorall GetThumbBoundSfn: function (index) {// consulte-> getThumbBoundsfn Sección de documentos para más información var thumbnail = items [index] .el.children [0], pageScroll = window.pageyoffset || document.document.scrolltop, rect = Thumbnail.getBoundingClient (); y: rect.top + pageyscroll, w: rect.width}; '<br/> <small> Foto:' + item.author + '</small>'; http://photoswipe.com/documentation/faq.html#custom-pid-in-url parseint (índice, 10); RealViewPortWidth, useLargeImages = false, firstesize = true, imagesrcwillchange; Gallery.ViewPortsize.x * Dpiratio; useLargeImages = false; ) {item.src = item.o.src; para (var i = 0, l = GalleryElements.length; i <l; i ++) {GalleryElements [i] .setTribute ('data-pswp-uid', i+1) PhotoswipeParsehash ();

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.