คลิกที่รูปภาพเพื่อขยายเอฟเฟกต์พิเศษ photoswipe.js ปลั๊กอินเพื่อใช้งาน

ปลั๊กอิน Photoswipe สามารถรับรู้การซูมเต็มหน้าจอบนโทรศัพท์มือถือและดับเบิลคลิกที่ภาพเพื่อขยายภาพ

Photoswipe Plugin เว็บไซต์ทางการ http://www.photoswipe.com/

แต่สิ่งหนึ่งไม่ดีเกี่ยวกับเรื่องนี้ หลังจากซูมเข้าไปในภาพคุณไม่สามารถปิดการท่องเว็บได้ คุณต้องคลิกปุ่มปิดหรือเลื่อนเพื่อปิด หลังจากค้นหาเป็นเวลานานคุณยังไม่ได้พูดถึงประเด็นนี้ คุณสามารถเปลี่ยนได้ด้วยตัวเองเท่านั้น

เปิด photoswipe.js มีคำจำกัดความของฟังก์ชั่นเกี่ยวกับการแตะบนบรรทัด 3179

กำหนดตัวแปรที่จุดเริ่มต้น

var tap_num = 0;

จากนั้นเพิ่มในคำจำกัดความของ ontapstart

 // เพิ่มลงใน s ที่คุณเพิ่มด้วยตัวเองตามความต้องการ // เอกสารว่าจะคลิกหรือดับเบิลคลิกเพื่อปิดดับเบิลคลิกเพื่อขยาย tap_num ++; if (tap_num <2) {settimeout (function () {ถ้า (tap_num> 1) {tap_num = 0; return;} อื่น {tap_num = 0; // ป้องกันว่ามีการลากหรือไม่ถ้ามีการลาก}}} ตามความต้องการ

อาจเป็นทั้งหมด

 var taptimer, tapReleasePoint = {}, _DispatchTapeVent = function (OrateVent, releasePoint, pointerType) {var e = document.createEvent ('customEvent'), edetail = {Origevent: Origevent 'สัมผัส' }; E.InitCustomeVent ('PSWPTAP', จริง, จริง, edetail); OrigeVent.target.dispatchevent (E); - var tap_num = 0; _registerModule ('tap', {publicmethods: {inittap: function () {_listen ('FirstTouchStart', self.ontapStart); _Listen ('touchRelease', self.ontapRelease); }; 1) {tap_num = 0; {return; P0); || framework.hasclass (e.target, 'pswp__single-tap')) {_dispatchtapevent (e, releasepoint); _EqualizePoints (TapReleasePoint, P0);

บีบอัด photoswipe.js ที่แก้ไขแล้วเพื่อรับรู้ฟังก์ชั่นที่คุณต้องการ

นอกจากนี้การใช้ปลั๊กอิน photoswipe ต้องใช้เฟรมเวิร์กและรหัสจาวาสคริปต์ซึ่งสามารถรวมเข้ากับ 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/55591/1586767 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/"tabindex =/"-1/"role =" dialog/"aria-hidden =" true/">"); ความทึบแสงเร็วกว่า rgba () class =/"pswp__scroll-wrap/"> "); document.writeln (" <!-คอนเทนเนอร์ที่เก็บสไลด์ "); document.writeln (" photoswipe เก็บเพียง 3 ของพวกเขาใน dom เพื่อบันทึกหน่วยความจำ " class =/"pswp__item/"> </div> "); document.writeln (" <div class =/"pswp__item/"> </div> "); document.writeln (" <div class = "pswp__item/"> </div> "); class =/"pswp__item/"> </div> "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" <! class =/"pswp__ui pswp__ui- ซ่อน/"> "); document.writeln (" "); document.writeln (" <!-การควบคุมเป็นคำอธิบายตัวเองคำสั่งซื้อสามารถเปลี่ยนแปลงได้-> "); document.writeln (" "); class =/"pswp__counter/"> </div> "); document.writeLn (" "); document.writeln (" <ปุ่มคลาส =/"pswp__button pswp__button--close/" title = "close (esc)/" button> "); PSWP__Button-Share/"title =" share/"> <// button>"); document.writeln (""); document.writeln ("<ปุ่มคลาส =/" pswp__button pswp__button-fs/"title =" toggle fullscreen/" การสาธิต preloader http:////codepen.io//dimsemenov//pen//yybwor-> "); document.writeln (" <!-องค์ประกอบจะได้รับคลาส pswp__preloader-active เมื่อ preloader กำลังทำงานอยู่-> "); document.writeln (" class =/"pswp__preloader__icn/"> "); document.writeln (" <div class =/"pswp__preloader__cut/"> "); document.writeln (" <div class = "pswp__preloader__cut/"> "); document.writeln (" class =/"pswp__preloader__donut/"> </div> "); document.writeln (" </div> "); document.writeln (" </div> "); document.writeLn (" </div> "); document.writeln (" </div> "); class =/"pswp__share-modal pswp__single-tap/"> "); document.writeln (" <div class =/"pswp__share-modal pswp__single-tap/"> "); document.writeln (" <div class =/"pswshare-tooltip/"> </div> "); document.writeln (" "); document.writeln (" <button class =/"pswp__button pswp__button-ลูกศร-left/" title =/"previous (ลูกศรซ้าย)/"> "); document.writeln (" pswp__button-arrow-ขวา/"title =/" ถัดไป (ลูกศรขวา)/">"); document.writeln ("</div>"); document.writeln (""); document.writeln ("<div class =" pswp__caption/">"); document.writeln ( class =/"pswp__caption__center/"> </div> "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); ent.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); riteln (""); 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 (""); <// div> "); document.writeln (" "); document.writeLn (" </div> "); (ฟังก์ชั่น () {var initphotoswipeFromdom = ฟังก์ชั่น (GallerySelector) {var parsethumbnaillements = function (el) Thumbnailel, ขนาด, สำหรับ (var i = 0; i <numnodes; El.GetAttribute ('Href'), W: ParseInt (ขนาด [0], 10), H: ParseInt (ขนาด [1], 10), ผู้แต่ง: El.GetAttribute ('Data-Author')}; Childlements [0] .getAttribute ('SRC'); El.getAttribute ('data-med-size'). แยก ('x'); items.push (รายการ); E.ReturnValue = FALSE; ClickedListItem.ParentNode.ChildNodes, numChildNodes = childNodes.length, nodeIndex = 0, ดัชนี; BREAK; hash.split ('&'); parseint (params.gid, 10); Galleryelement.getAttribute ('data-pswp-uid'), getthumbboundsfn: ฟังก์ชั่น (ดัชนี) {// ดูตัวเลือก-> getthumbboundsfn ส่วนของเอกสารสำหรับข้อมูลเพิ่มเติม var thumbnail = รายการ [ดัชนี] Thumbnail.getBoundingClientRect (); paptionel.children [0] .innerhtml = item.title + '<br/> <small> photo:' + item.author + '</small>'; http://photoswipe.com/documentation/faq.html#custom-pid-in-url สำหรับ (var j = 0; j <items.length; ParseInt (ดัชนี, 10); RealViewPortWidth, uselargeImages = false, firstresize = true, imagesrcwillchange; แกลเลอรี่. Gallery.viewportsize.x * dpiratio; {uselargeimages = false; uselargeMages) {item.src = item.o.src; GallerySelection); Photoswipeparsehash ();

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น