Photoswipeプラグインは、携帯電話でフル画面の拡大を実現し、画像をダブルクリックして画像を拡大できます。
Photoswipeプラグインの公式ウェブサイトhttp://www.photoswipe.com/
しかし、1つのことはそれについて良くありません。写真をズームインした後、ブラウジングを閉じることはできません。閉じるボタンをクリックするか、閉じる必要があります。長い間検索した後、あなたはまだこの点について言及していません。あなたはそれを自分で変更することしかできません。
Photoswipe.jsを開くと、3179行のタップに関する関数定義があります
最初に変数を定義します
var tap_num = 0;
次に、Ontapstartの定義に追加します
//ニーズに応じて自分で追加するSに追加//クリックするかダブルクリックしてダブルクリックを閉じてTAP_NUM ++を拡大するかどうかを文書化します。 if（tap_num <2）{setimeout（function（）{if（tap_num> 1）{tap_num = 0;} else {tap_num = 0; //ドラッグがあるかどうかを守る。ニーズに応じてあなた自身おそらくそれが全体です
var taptimer、tapReleasepoint = {}、_dispatchtapevent = function（origevent、releasepoint、pointertype）{var e = document.createevent（ 'customevent'）、edetail = {origevent：origevent、target：oginevent.target、releasepoint、pointertopoint、pointertopoppe：pointertepe | | '触る' }; 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（ 'destreleeasephing = unestion（） }）、ontapstart：function（touchlist.length> 1）{taptimer = null} 1）{tap_num = 0; （！return）} if（！_ismultuth &&！ _shout（doubletap '、p0）}} if（clickedtagname '|| framework）{_dispatchtapevent（e、releasepoint）_ equalizepoints _ equalizepoints（tapreleasepoint、p0）;変更されたPhotoswipe.jsを圧縮して、必要な機能を実現します
さらに、Photoswipeプラグインを使用するには、フレームワークとJavaScriptコードを挿入する必要があります。これは、1つのJSに統合されてから導入できるため、ページがはるかにシンプルに見えます。
最初にhtmlに絵のアルバム構造を書いて、スタイルに合わせます
<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/150088888887125_B6196019601 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>
JSを組織しました
document.writeln（ "<！ - photoswipeのルート要素。クラスpswp。->"）; document.writeln（ "<div class =/" pswp/"-1/" role =/"dialog/" aria-hidden =/"true/"> "）; document.writeln（" <不透明度はrgba（）より速い（）; document.writeln（ "" <div class =/"pswp__bg/"> <// div> "）; document.writeln（" "）; document.writeln（" <！ - slidesラッパー：hidden：> "）; document.writeln class =/"pswp__scroll-wrap/"> "）; document.writeln（" <！ - コンテナを保持するコンテナ "）; document.writeln（" Photoswipeはメモリを保存するために3つしか保持しない。 "） 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 "; class =/"pswp__ui pswp__ui-hidden/"> "）; document.writeln（" "）; document.writeln（" <！ - コントロールは自明です。注文は変更できます。 class =/"pswp__counter/"> </div> "）; document.writeln（" "）; document.writeln（" <button class =/"pswp__button pswp__ose/" tittle =/"close（esc）/"> <// button> "）; document.writeln（"）; documentln（ "" <botutn（ "<button）; pswp__button - share/"title =/" share/"> <// button>"）; document.writeln（ ""）; document.writeln（ "<button class =/" pswp__button pswp__utton - fs/"title =/" toggle fullscreen/"> <// button>"; Preloader demo http://///codepen.io//dimsemenov//pen//yybwor-> "）; document.writeln（" <！ - elementはクラスPSWP__preloaderを取得します - プリコーダーが実行されている場合 - > "）; document.writeln（" <div 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>"）; </div> "）; document.writeln（" </div> "）; document.writeln（" <div class =/"pswp__share-modal pswp__single-tap/"> "）; document.writeln（" <div class =/"pswp__share-modal pswp__singliteln（document-div class =/"pswp__share-tooltip/"> </div> "）; document.writeln（" </div> "）; document.writeln（" "）; document.writeln（" <button class =/"pswp__button pswp__button - arrow- left/" title =/"前（arrow左）/"> ">"> ">"/" </button> "）; document.writeln（" "）; document.writeln（" <button class =/"pswp__button pswp__button-arrow - right/" title =/"next（arrow right）/"> "）; document.writeln（" </div> "）; document.writeln（"）; ""）; "） class =/"pswp__caption/"> "）; document.writeln（" <div 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 initphotoswipefromdomd = function（galleryselector）{var parseThumbnaillements = function（el）{var thumbelements = el.childnodes、elr. elrenglements. sumbnailel、var i = 0; i ++）{el.nodeType！== 1） el.getattribute（ 'href'）、w：parseint（size [0]、10）、h：parseint（size [1]、10）、el.gettribute（ 'data-author'）} ChildElements [0] .gettribute（ 'src'）; el.getattribute（ 'data-med-size'）。 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 = var etarget || numChildNodes.lengthex = 0; 0）{index、clickedgallery} I < OpenPhotoswipe（Index、GalleryElement、DisableAnimation、fromal）{var pspelement = document.queryselectorall（ '。PSWP'）[0]、ギャラリー、オプション、アイテムgetthumbboundsfn：function（index）{// options-> getthumbboundsfnセクションを参照してください。 Y：rect.top + pageyscroll、width}、addcaptionhtmlfn：if（！item.title）{captionel.children [0] .innertext = ''; '<br/> <small>' author + '<// control bar options.shareel = false; http://photoswipe.com/documentation/faq.html#custom-in-url parseint（index、10）; RealViewPortWidth、uselargeimages = false、firstresize = true、imagesrcwillchange; gallery.viewportsize.dpiratio; uselgeimages = false = true; uselgeimage.o.src.oh. oh; GallerySelector）; Photoswiparsehash（）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。