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をもっとサポートすることを願っています。