Plug-in Photoswipe dapat mewujudkan zoom layar penuh di ponsel dan klik dua kali pada gambar untuk memperbesar gambar.
Plugin Photoswipe Situs Web Resmi http://www.photoswipe.com/
Tapi satu hal tidak baik tentang itu. Setelah memperbesar gambar, Anda tidak dapat menutup penjelajahan. Anda harus mengklik tombol Tutup atau geser untuk menutupnya. Setelah mencari waktu yang lama, Anda masih belum menyebutkan poin ini. Anda hanya dapat mengubahnya sendiri.
Buka Photoswipe.js, ada definisi fungsi tentang tap on line 3179
Tentukan variabel di awal
var tap_num = 0;
Kemudian tambahkan dalam definisi OntapStart
// Tambahkan ke S yang Anda tambahkan sendiri sesuai dengan kebutuhan // mendokumentasikan apakah akan mengklik atau mengklik dua kali untuk menutup dua kali klik untuk memperbesar tap_num ++; if (tap_num <2) {setTimeOut (function () {if (tap_num> 1) {tap_num = 0; return;} else {tap_num = 0; // pertahanan apakah ada seret atau tidak. Jika ada tambahan, tutup jika (_isdragging) {return;} lain {self -close (); sesuai kebutuhanMungkin itulah keseluruhannya
var tapTimer, tapReleasePoint = {}, _dispatchTapEvent = function(origEvent, releasePoint, pointerType) { var e = document.createEvent( 'CustomEvent' ), eDetail = { origEvent:origEvent, target:origEvent.target, releasePoint: releasePoint, pointerType:pointerType || 'menyentuh' }; E.InitCustomEvent ('PSWPTAP', Benar, Benar, Edetail); origevent.target.dispatchevent (e); }; var tap_num = 0; _RegisterModule ('tap', {publicmethods: {inittap: function () {_listen ('firsttouchstart', self.ontapStart); _listen ('touchrelease', selfrelease); _listen ('hancur', function () {{{{{{{{{','); }); 1) tap_num = 0; if (! Releasepoint) {return; _shout (DoubleTap ', P0); if (clickedtagname === 'Tombol' || framework.hasclass (e.target, 'pswp__single-tap')) {_dispatchTapEvent (e, rilis); Return;Kompres photoswipe.js yang dimodifikasi untuk mewujudkan fungsi yang Anda inginkan
Selain itu, menggunakan plugin Photoswipe memerlukan penyisipan kerangka kerja dan kode JavaScript, yang dapat diintegrasikan ke dalam satu JS dan kemudian diperkenalkan, sehingga halaman terlihat jauh lebih sederhana.
Pertama tulis struktur album gambar di html dan cocokkan gaya
<Div id = "demo-test-gallery"> <a href = "https://farm4.staticflickr.com/3894/15008518202_C265DFA55F_H.JPG"-size = "1600x1600" Data-Med = "https://farm44.staticflickr.com/3894/15008518202_B016D7D289_B.jpg" data-med-size = "1024x1024"> <img src = "https://farm44.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"/> </a> <a href = "https:/farm6.staticflickr.com/5591/150088886867.farm61 ukuran data = "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 terorganisir
Document.writeln ("<!-Elemen root dari photoswipe. Harus memiliki kelas pswp.->"); document.writeln ("<div class =/" pswp/"tabindex =/"-1/"role =/" dialog/"aria-hidden =" true/">"); document.writeln ("<!-" aria-hidden = "true/"); document.writeln ("<!-" aria-hidden =/"true/"); document.writeln ("<! latar belakang foto-foto ARIA-HIDDENTE ="); document.writeln ("<! Opacity lebih cepat dari rgba (). class =/"pswp__scroll-wrap/"> "); document.writeln (" <!-container yang memegang slide. "); document.writeln (" Photoswipe hanya menyimpan 3 dari mereka di dom untuk menyimpan memori. "); Document.writeln (" don/'t Modifikasi 3 PSWP__LEMENT. "); Document.writeln (" don/' t Modifikasi ini 3 PSWP__LEMENT. 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 (" <!-Document (document. (Document.); Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (Document. (DOCUCER/DOPUTER (DOUMENT (DOUMENT (DOCURID (DOCURICE. class =/"PSWP__UI PSWP__UI- TERSEDIA/"> "); Document.Writeln (" "); Document.Writeln (" <!-Kontrol cukup jelas. Ketertiban dapat diubah.-> "); Document.writeln (" "); Document.Writeln (" <Div class =/"pswp__counter/"> </div> "); document.writeln (" "); document.writeln (" <tombol class =/"pswp__button pswp__button-close/" title = "tutup (esc)/"> <// button> "); document.wrrargeln (" ");" Dokumen (""); "Dokumen (" ""); " PSWP__BUTTON-Share/"title =/" share/"> <// button>"); document.writeln (""); document.writeln ("<tombol class =/" pswp__button pswp__button (fs/"title =" toggle fullscreen/"> <//buthn. Demo preloader http:////codepen.io//dimsemenov//pen//yybwor-> "); document.writeln (" <!-elemen akan mendapatkan kelas pswp__peloader-preloader); <Div class =/"pswp__peloader__icn/"> "); document.writeln (" <div class =/"pswp__peloader__cut/"> "); document.writeln (" <div class =/"pswp__peloader__cut/" "); document.writeln (" <pswp__peloader__cut/""); document.writeln (" class =/"pswp__peloader__donut/"> </div> "); document.writeln (" </div> "); document.writeln (" </div> "); document.writeln (" </div> "); document.writeln (" </div> "); document.writeln (" </document.writeln ("</div>"); document.writeln (" class =/"PSWP__Share-Modal PSWP__SINGLE-TAP/"> "); document.writeln (" <div class =/"pswp__share-modal pswp__single-tap/"> "); document.writeln (" <v class =/"pswp__share-tooltip/"> </document ";" Document = "(document =/" pswp__share-tooltip/"> </"> </document. "" "" "" </div> "); document.writeln (" "); document.writeln (" <tombol class =/"pswp__button pswp__button-arrow-" "title =/" sebelumnya (panah kiri)/""); document.writeln ("</tombol>"); document.writas (""); "writeln (" </button "); document.writeln (" ");" writeln ("</button"); document.writeln (""); "(" </button "); document." "") PSWP__BUTTON-ARROW-Right/"Title =/" Next (Arrow Right)/">"); document.writeln ("</div>"); document.writeln (""); document.writeln ("<div class =/" pswp__caption/""); document.wrriteln ("<div =" pswp__caption/""); document.wrriteln ("<Div class =/"pswp__caption__center/"> </div> "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); documum 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 (galeri galeri) {var parsethumbnements = function (el) {var thumbelements = el.childnodes, numbnodements = fleumbements = thumbelements. Thumbnailelel, item; untuk (var i = 0; i <numnodes; i ++) {el = thumbelement [i]; el.getAttribute ('href'), w: parseInt (size [0], 10), h: parseInt (size [1], 10), penulis: el.getattribute ('data-author')}; ChildElements [0] .getAttribute ('src'); el.getAttribute ('data-med-size'). split ('x'); // "medium berukuran" item.m = {src: mediumsrc, w: parseInt (size [0], 10), h: parseInt (1], 10)} // item {h: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: w: {s. item (item); = Var Etarget = E.Target || numchildnodes = childnodes.length, nodeindex = 0, index; 0) {OpenPhotoswipe (Index, ClickedGallery); I <Vars.Length; OpenPhotosWipe = Fungsi (indeks, Galeri, DisableAnimation, FromUrl) {var pSwpelement = document.QuerySelectorAll ('. Getthumbboundsfn: Function (index) {// Lihat opsi-> getthumbboundsfn dari dokumen untuk info lebih lanjut var thumbnail = item [index] .el.children [0], pageyscroll = window.pageyoffset | iB document. y: rect.top + pageyscroll, w: rect.width}; <br/> <small> Foto: ' + item.Author +' </small> ' http://photoswipe.com/documentation/faq.html#custom-pid-in-url for (var j = 0; j <items.length; j ++) {if (J]} {Opsies. ParseInt (Index, 10); RealViewportWidth, uselargeimages = false, firstresize = true, imagesrcwillchange; galeri.viewportsize.x * DPiratio; {Uselargeimages = false; Uselargeimages) {item.src = item.o.src ); Photoswipeparsehash ();Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.