يمكن أن يدرك Photoswipe Plug-in تكبير الشاشة على الهاتف المحمول والنقر نقرًا مزدوجًا على الصورة لتكبير الصورة.
موقع Photoswipe Plugin الرسمي http://www.photoswipe.com/
لكن هناك شيء واحد ليس جيدًا حيال ذلك. بعد التكبير على الصورة ، لا يمكنك إغلاق التصفح. يجب عليك النقر فوق الزر "إغلاق أو شريحة" لإغلاقه. بعد البحث لفترة طويلة ، ما زلت لم تذكر هذه النقطة. يمكنك فقط تغييره بنفسك.
Open Photogswipe.js ، هناك تعريف وظيفة حول النقر على السطر 3179
تحديد متغير في البداية
var tap_num = 0 ؛
ثم أضفه في تعريف ontapstart
// أضف إلى S الذي تضيفه بنفسك وفقًا للاحتياجات // ما إذا كنت تريد النقر أو النقر نقرًا مزدوجًا لإغلاق النقر المزدوج لتكبير TAP_NUM ++ ؛ if (tap_num <2) {setTimeOut (function () {if (tap_num> 1) {tap_num = 0 ؛ return ؛} آخر {tap_num = 0 ؛ // الدفاع عن ما إذا كان هناك سحب أم لا. نفسك حسب الاحتياجاتربما هذا كله
var taptimer ، tapreLeasePoint = {} ، _dispatchtapevent = function (origevent ، releasepoint ، pointertype) {var e = document.createevent ('customevent') ، edetail = {origevent ، target: erorgevent.target ، releasepoint ، pointertype 'يلمس' }؛ 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) ؛ }) ؛ 1) {TAP_NUM ؛ if (! releasepoint) {return ؛ _shout (doubletap '، p0) ؛ if (clickedTagname === '|| framework.hasClass ( العودة ؛اضغط على photo -mipebipe.js لتحقيق الوظائف التي تريدها
بالإضافة إلى ذلك ، يتطلب استخدام البرنامج المساعد Photoswipe إدخال أطر عمل ورمز JavaScript ، والذي يمكن دمجه في JS واحد ثم تقديمه ، بحيث تبدو الصفحة أبسط بكثير.
اكتب أولاً بنية ألبوم الصورة على HTML وقم بمطابقة النمط
<div id = "demo-test-gallery"> <a href = "https://farm4 data-med = "https://farm4 src = "https://farm4 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 ("<!-عنصر الجذر من PhotoRipwipe. عتامة الرسوم المتحركة أسرع من RGBA (). class =/"pswp__scroll-wrap/"> ") ؛ document.writeln (" <!-حاوية تحمل الشرائح. ") ؛ document.writeln (" Photogwipe يحتفظ فقط 3 منها في DOM لحفظ الذاكرة.) class =/"pswp__item/"> </viv> ") ؛ document.writeln (" <div class =/"pswp__item/"> </viv> ") ؛ document.writeln (" <div class =/ class =/"pswp__item/"> </viv> ") ؛ document.writeln (" ") ؛ document.writeln (" ") ؛ document.writeln (" ") ؛ document.writeln (" ") class =/"pswp__ui pswp__ui--hidden/"> ") ؛ document.writeln (" ") ؛ document.writeln (" <!-عناصر التحكم هيية ذاتية. يمكن تغيير الطلب.-> ") ؛ document.writeln (" "") class =/"pswp__counter/"> </viv> ") ؛ document.writeln (" ") ؛ document.writeln (" <button class =/"pswp__button pswp________button-close/" title =/"close (/" pswt) pswp__button-share/"title =/" share/"> <// button>") ؛ document.writeln ("") ؛ document.writeln ("<button class =/" pswp__button pswp____________ ("desconcln (" desconcln ("<!) ؛ preloader demo http:///codepen.io//dimsemenov//pen//yybwor-> ") ؛ document.writeln (" <!-العنصر سيحصل على pswpmpreloader-Active عندما يتم تشغيل preloader-> ") ؛ class =/"pswp__preloader/"> ") ؛ document.writeln (" <div class =/"pswpmpreloader__icn/"> ") ؛ document.writeln ( class =/"pswpmpreloader__cut/"> ") ؛ document.writeln (" <div class =/"pswpmpreloader__donut/"> </viv>) </viv> ") ؛ document.writeln (" </div> ") ؛ document.writeln (" <div class =/"pswp__share-modal pswp__single-tap/"> ") ؛ document.writeln (" <div class =/"pswp__share-modal pswp__single-tap/"> class =/"pswp__share-tooltip/"> </viv> ") ؛ document.writeln (" </div> ") ؛ document.writeln (" ") ؛ document.writeln (" <button class =/ </button> ") ؛ document.writeln (" ") ؛ document.writeln (" <<button class =/"pswp__button pswp__button-arrow--right/" title =/"next (rerow right)/"> ") ؛ document.writeln ( class =/"pswp__caption/"> ") ؛ document.writeln (" <div class =/"pswp__caption__center/"> </viv> ") ؛ 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 ("") <// div> ") ؛ document.writeln (" ") ؛ document.writeln (" </div> ") ؛ (function () {var initphotoswipefromdom = function (galleryselector) {var parsethumbnailements = function (el) {var thumbelements = el.Childnodes ، numnodes = thumbelements. Thumbnailel ، العنصر ؛ EL.GetAttribute ('HREF') ، W: الحجم [0] ، 10) ، H: Parseint (1] childelements [0]. EL.GetAttribute ('data-med-size'). split ('x') ؛ items.push (العنصر) ؛ = FALSE VAR numchildnodes = eildnodes.lender ، exply ، index ؛ 0) {OpenPhotoswip i <frships ؛ OpenPhotoswipe = فهرس ، معرض ، تعطيل ، Fromurl) GetThumbboundsfn: Function (index) {// انظر الخيارات- + PageScroll ، W: rect.width} ؛ Item.Author + '</small>' ؛ لـ (var j = jits.length ؛ j ++) {if (j] // تمرير البيانات إلى معرض Photoswipe وتهيئته = New Photoswipe (PswePelement ، Photoswipeui_Default ، خيارات) ؛ gallery.listen ('beforeresize' ، function () {var dpiratio = window.devicepixelratio؟ window.devicepixelratio: 1 ؛ dpiratio = math.min (dpiratio ، 2.5) ؛ RealViewPortWidth = gallery.viewportsize.x * dpiratio ؛ ! if (picturesrcwillChange &&! item.Ow ؛ المعرضات [i] OpenPhotoswipe (Hashdata.pid ، معرضات [hashdata.gid - 1] ، صواب) ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.