Le plug-in Photoswipe peut réaliser un zoom plein écran sur le téléphone mobile et double-cliquez sur l'image pour agrandir l'image.
Site officiel du plugin Photoswipe http://www.photoswipe.com/
Mais une chose n'est pas bonne à ce sujet. Après avoir zoom sur l'image, vous ne pouvez pas fermer la navigation. Vous devez cliquer sur le bouton Fermer ou glisser pour le fermer. Après avoir cherché longtemps, vous n'avez toujours pas mentionné ce point. Vous ne pouvez que le changer vous-même.
Ouvrir Photoswipe.js, il y a une définition de fonction sur Tap On Line 3179
Définir une variable au début
var tap_num = 0;
Puis ajoutez-le dans la définition d'Ontapstart
// Ajoutez au S que vous ajoutez par vous-même en fonction des besoins // Documez si vous devez cliquer ou double-cliquer pour fermer le double clic pour agrandir TAP_NUM ++; if (tap_num <2) {setTimeOut (function () {if (tap_num> 1) {tap_num = 0; return;} else {tap_num = 0; // défendez s'il y a glisser ou non. S'il y a glisser, fermer if (_isDragging) {return;} else {self.close () vous-même selon les besoinsC'est probablement le tout
var taptimer, tapreeleSepoint = {}, _dispatchTapevent = function (OrigEvent, releasepoint, pointerType) {var e = document.createevent ('customevent'), edetail = {OrigEvent: OrigEvent, Target: OrigEvent.Target, Reasepoint: Reasepoint, Pointertype: Pointertype || 'touche' }; E.InitCustomevent («PSWPTAP», True, True, Edetail); Origonent.target.DispatchEvent (E); }; var tap_num = 0; _registerModule ('tap', {publicMethods: {inittap: function () {_Listen ('FirstTouchstart', self.ontapstart); _listten ('touchrelease', self.ontaprelease); _Listen ('destrug }); rès {Tap_Num = 0; {return;} if (! _ mobile &&! _ismultitouch &&! P0); 'Button' || Framework.hasclass (e.targe _EqualizEpoint (TapReleSepoint, p0);Compresser les photoswipe.js modifiés pour réaliser les fonctions que vous souhaitez
De plus, l'utilisation du plugin Photoswipe nécessite l'insertion de frameworks et de code JavaScript, qui peut être intégré dans un js, puis introduit, de sorte que la page semble beaucoup plus simple.
Écrivez d'abord la structure de l'album d'image sur le HTML et correspondez au 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.statickflickr.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.statickflickr.com/5591/15008867125_68a8ed88cc_m.jpg" /> </a> </ div>
JS organisé
Document.Writeln ("<! - Élément root de Photoswipe. Doit avoir la classe PSWP. ->"); document.writeln ("<div class = /" pswp / "tabindex = /" - 1 / "role = /" Dialog / "aria-hidden = /" true / ">"); docutel.writeln ("<! - atepred aswelet") "); Docutel.writel. L'animation de l'opacité est plus rapide que rgba (). Class = / "PSWP__SCROLL-WAP /"> "); document.writeln (" <! - Conteneur qui contient des diapositives. "); document.writeln (" Photoswipe n'en garde que 3 dans le Dom pour enregistrer la mémoire. "); Document.Writeln (" Don / 'T Modifier ces 3 PSWP__Item Elements, les données sont ajoutées plus tard sur. class = / "pswp__item /"> </ div> "); document.writeln (" <div class = / "pswp__item /"> </ div> "); document.writeln (" <div class = / "pswp__item /"> </div> "); document.writeln (" <divp__item / "> </ div>"); document.writeln ("<divp__item /"> </ diving Class = / "PSWP__item /"> </ div> "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" <! - Default (PhotoswipeUi_default) Interface en haut de la zone de glissement. class = / "pswp__ui pswp__ui--hidden /"> "); document.writeln (" "); document.writeln (" <! - Les contrôles sont explicites. L'ordre peut être modifié. -> "); 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.WRITELln (" <bouton pswp__button - share / "title = /" share / "> <// bouton>"); document.writeln (""); document.writeln ("<button class = /" pswp__button pswp__button - fs / "title = /" toggle fullScreen / "> </ / bouton>"); document.writeln ("" "); document. Preloader Demo http:////codepen.io//dimsemenov//pen//yybwor -> "); document.writeln (" <! - Element obtiendra la classe PSWP__preloader - active lorsque Preloader fonctionne -> "); Document.Writeln (" <diVive 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 (" </v> "); document.writeln (" </v> "); </div> "); document.writeln (" </div> "); document.writeln (" <div class = / "pswp__share-mod pswp__single-tap /"> "); document.writeln (" <div class = / "pswp__share-modal pswp__single-tap /"> "); document.writelln (" " class = / "pswp__share-tooltip /"> </div> "); document.writeln (" </div> "); document.writeln (" "); document.writeln (" <Button class = / "pswp__button pswp__button - arrow - "writeln (" </ Button> "); document.writeln (" "); document.writeln (" <Button class = / "pswp__button pswp__button-arrow - droite /" title = / "next (arrow right) /"> "); document.writeln (" </ div> "); document.writeln (" "); document.writeln (" " classe = / "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. 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.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); 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 (galeryselect ThumbNailel, Taille, élément; el.getAttribute ('href'), w: parseInt (taille [0], 10), h: parseInt (taille [1], 10), auteur: el.getAttribute ('data-auteur')}; childElements [0] .getAttribute ('src'); el.getAttribute ('Data-Med-Size'). Split ('x'); Items.Push (Item);} Return Items;}; = false; NumChildNodes = ChildNodes.length, NodeIndex = 0, index; {OpenPhotoswipe, ClickEdGallery);} return false; varse Fonction (index, galerie, désagréation, FromUrl) {var pswPelement = document.QuerySelectorAll ('. PSWP') [0], Options, éléments; Fonction (index) {// Voir Options-> GetThumboundSfn section de documents pour plus d'informations var Thumbnail = items [index] .el.children [0], pageyscroll = window.pageyoffset || w: rect.width};}, addCaptionhtmlfn: fonction (item, légendel, isfake) {if (! '</ small>'; <items.Length; J ++) {if (j] .pid == index) {Options.Index = J; et initialiser la galerie = Nouveau Photoswipe (PswPelement, Photoswipeui_default, éléments, options); dpiratio = window.DevicePixelratio? 1200) {if (! if (firStresize) {firStreSize = false;} imagesrcwillchange = false;}); gale item.mw; GALERSELLES [I] .OnClick = ONTHUMBNAILSCLICK;} // URL PARSE et Open Gallery Si elle contient # & pid = 3 & gid = 1 var hashdata = PhotosWipeParsehash (); ], true, vrai);}};Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.