photoswipe.js เว็บไซต์อย่างเป็นทางการ: http://photoswipe.com/, ไฟล์ photoswipe และตัวอย่างที่เกี่ยวข้องสามารถดาวน์โหลดได้ในเว็บไซต์นี้
ส่วนประกอบนี้ส่วนใหญ่จะใช้เพื่อแสดงรูปภาพและอัลบั้มและใช้งานได้จริงมาก
1. การใช้ส่วนประกอบนี้ต้องใช้ไฟล์ JS สองไฟล์
1 <script type = "text/javascript" src = "simple-inheritance.min.js">
2 <script type = "text/javascript" src = "code-photoswipe-1.0.11.min.js"> <!-เวอร์ชันล่าสุดปัจจุบันควรเป็น 1.0.11->
2. จากนั้นโครงสร้างหน้าสามารถเป็นเช่นนี้ได้
<div id = "แกลเลอรี่"> <div> <div> <a href = "รูปภาพ/เต็ม/01.jpg"> <img src = "ภาพ/นิ้วหัวแม่มือ/01.jpg"/> </a> </div> <div> <a href = "ภาพ/เต็ม/02.jpg" <div> <a href = "รูปภาพ/เต็ม/04.jpg"> <img src = "ภาพ/เต็ม/04.jpg"> <img src = "ภาพ/เต็ม/04.jpg"> <img src = "รูปภาพ/thumb/04.jpg"/> </a> src = "images/thumb/05.jpg"/> </a> </div> <div> <a href = "ภาพ/เต็ม/06.jpg"> <img src = "รูปภาพ/thumb/06.jpg"/> </a>
ในความเป็นจริงนอกเหนือจากโครงสร้างหน้าสิ่งเดียวที่มีประโยชน์จริงๆในรหัส HTML นี้คือ id = "แกลเลอรี่" และ <a href = "เส้นทางภาพ"> </a> (จะอธิบายในภายหลัง) คลาสอื่นมีบทบาทในการตกแต่งโครงสร้างหน้าดั้งเดิม (แตกต่างจากหน้าเว็บที่คุณต้องการมีเอฟเฟกต์จริงๆนั่นคือคุณเพียงแค่ต้องพิมพ์ตามโครงสร้างหน้าด้านบนและเอฟเฟกต์หน้าคุณต้องการเสร็จสิ้นโดยปลั๊กอิน JS เองและคุณไม่จำเป็นต้องเขียนเค้าโครงเอฟเฟกต์)
หน้าต้องการทั้งโครงสร้าง JS และหน้าและต่อไปนี้คือการใช้ปลั๊กอิน
3. คุณสามารถใช้สองวิธีในการประกาศปลั๊กอิน
1. ทำโดย addingEventListener () ในเบราว์เซอร์เริ่มต้น
document.addeventListener ("domcontentloaded", function () {code.photoswipe ('a', '#gallery'); // สิ่งนี้เกี่ยวข้องกับ id = "แกลเลอรี่" และ <a href = "... "> </a> ในโครงสร้างหน้าด้านบน ชี้ไปที่}, เท็จ);2. วิธีใช้ jQuery:
$ (เอกสาร) .ready (function () {$ ("#Gallery a"). photoswipe ();});4. ด้วยการตั้งค่านี้หน้าของคุณอาจจะเป็นเช่นนี้
ผลของหน้าเว็บที่จุดเริ่มต้น:
หลังจากคลิกที่ภาพใด ๆ รูปแบบของหน้าจะกลายเป็นดังต่อไปนี้ (หน้านี้เป็นหน้าจริงที่ฉันต้องการจริงๆ):
คุณสามารถเห็นเนื้อหาใน alt ใน <img /> เหนือหน้าและจะมีสี่ปุ่มด้านล่างแสดง: ปิดหน้าและกลับไปที่รูปลักษณ์ดั้งเดิม (นั่นคือภาพด้านบน) การเล่นอัตโนมัติภาพหน้าก่อนหน้าและภาพหน้าถัดไป
เอฟเฟกต์ของอัลบั้มดังกล่าวจะปรากฏขึ้น แน่นอนคุณสามารถใช้เมาส์เพื่อปัดไปทางซ้ายและขวาในหน้านี้ หากคุณอยู่บนอุปกรณ์พกพาคุณสามารถปัดไปทางซ้ายและขวาบนนิ้วของคุณ
ปลั๊กอินนี้มีคุณสมบัติมากมาย:
OldUserZoom: อนุญาตให้ผู้ใช้ดับเบิลคลิกเพื่อดูรูปภาพโดยการซูมเข้า/ย้าย ค่าเริ่มต้น = จริง
AutostartsLideshow: เมื่อเปิดใช้งาน Photoswipe สไลด์โชว์จะถูกเล่นโดยอัตโนมัติ ค่าเริ่มต้น = false
AllowRotationOnuserZoom: รองรับโดย iOS เท่านั้น - อนุญาตให้ผู้ใช้หมุนภาพด้วยท่าทางในโหมดซูม/แพน ค่าเริ่มต้น = false
BackbuttonHideenabled: กดปุ่ม Return เพื่อซ่อนสไลด์อัลบั้ม ส่วนใหญ่ใช้โดย Android และ Blackberry รองรับ BB6, Android v2.1, iOS 4 และรุ่นใหม่กว่า ค่าเริ่มต้น = จริง
Pationandtoolbarautohidedelay: เวลาการหน่วงเวลาที่ซ่อนอยู่โดยอัตโนมัติโดยแถบชื่อเรื่องและแถบเครื่องมือ ค่าเริ่มต้นคือ = 5000 (MS) หากตั้งค่าเป็น 0 มันจะไม่ถูกซ่อนไว้โดยอัตโนมัติ (แตะ/คลิกเพื่อสลับมองเห็นและซ่อนอยู่)
PACTIONANDTOOLBARFLIPPOSITION: สลับตำแหน่งระหว่างแถบชื่อเรื่องและแถบเครื่องมือ (ให้คำบรรยายแสดงที่ด้านล่างและแถบเครื่องมือจะแสดงที่ด้านบน) ค่าเริ่มต้น = false
PATIONANDTOOLBARHIDE: ซ่อนแถบชื่อเรื่องและแถบเครื่องมือ ค่าเริ่มต้น = false
PATIONANDTOOLBAROPACITION: ความโปร่งใสของแถบหัวเรื่องและแถบเครื่องมือ (0-1) ค่าเริ่มต้น = 0.8
PationandToolBarShowEmpTyCaptions: แสดงแถบชื่อเรื่องแม้ว่าชื่อของภาพปัจจุบันจะว่างเปล่า ค่าเริ่มต้น = จริง
cachemode: โหมดแคช, code.photoswipe.cache.mode.normal (ค่าเริ่มต้น, ปกติ) หรือ code.photoswipe.cache.mode.aggressive (Radical, active) ตัดสินใจว่า Photoswipe จัดการแคชอิมเมจแคชได้อย่างไร
โหมดก้าวร้าวจะตั้งค่าประเภทของภาพที่ไม่ใช่ "ปัจจุบันก่อนหน้าถัดไป" ถัดไป "ที่ว่างเปล่า มันจะเป็นประโยชน์สำหรับหน่วยความจำล้นในเบราว์เซอร์ iOS รุ่นเก่า ในกรณีส่วนใหญ่โหมดปกติก็โอเค
DoubleTapSpeed: ช่วงเวลาสูงสุดสำหรับการดับเบิลคลิก ค่าเริ่มต้น = 300 (MS)
DoubleTapZoomlevel: เมื่อผู้ใช้ดับเบิลดับเบิลคลิกหลายตัวขยายคือระดับ "ซูมเข้า" เริ่มต้น ค่าเริ่มต้น = 2.5
enabledRag: อนุญาตให้ลากภาพก่อนหน้า/ถัดไปไปยังอินเทอร์เฟซปัจจุบัน ค่าเริ่มต้น = จริง
ENABLEKEYBOARD: อนุญาตให้ใช้แป้นพิมพ์ (สลับลูกศรซ้ายและซ้าย, ออก ESC, เข้าสู่การเล่นอัตโนมัติ, การแสดงผลแถบอวกาศ/แถบชื่อเรื่องที่ซ่อนอยู่) default = true
enablemousewheel: อนุญาตให้ใช้งานล้อของเมาส์ default = true
FadeInspeed: ความเร็ว (ระยะเวลา) ขององค์ประกอบเอฟเฟกต์มิลลิวินาที ค่าเริ่มต้น = 250
fadeoutspeed: ความเร็ว (ระยะเวลา) ขององค์ประกอบเอฟเฟกต์มิลลิวินาที ค่าเริ่มต้น = 250
ImageScalemethod: วิธีการปรับขนาดภาพ (โหมด) ค่าเสริม: "พอดี", "fitnouscale" และ "ซูม" โหมด "พอดี" ทำให้มั่นใจได้ว่าภาพจะปรับให้เข้ากับหน้าจอ "Fitnouscale" คล้ายกับ "พอดี" แต่ไม่ได้ขยายภาพ "ซูม" จะคัดกรองภาพเต็มรูปแบบ แต่เป็นไปได้ว่าการปรับภาพไม่ได้สัดส่วนเท่า ๆ กัน default = "พอดี"
Invertmousewheel: กลับล้อเมาส์ โดยค่าเริ่มต้นการเลื่อนเมาส์ลงจะเปลี่ยนไปเป็นรูปภาพถัดไปและจนถึงภาพก่อนหน้า ค่าเริ่มต้น = false
jQueryMobile: ระบุว่า photoswipe ถูกรวมเข้ากับโครงการ JQuery Mobile หรือไม่ โดยค่าเริ่มต้น Photoswipe จะพยายามทำสิ่งนี้ให้คุณ
jQueryMobileDialoghash: แท็กแฮชของ JQuery Mobile ใช้สำหรับหน้าหน้าต่างและหน้าโต้ตอบ ค่าเริ่มต้น = "& ui-state = กล่องโต้ตอบ"
Loop: อัลบั้มจะวนซ้ำโดยอัตโนมัติหรือไม่ default = true
ระยะขอบ: ช่วงเวลาระหว่างสองภาพหน่วยคือพิกเซล ค่าเริ่มต้น = 20
MaxuserZoom: กำลังขยายสูงสุด ค่าเริ่มต้น = 5.0 (ตั้งค่าเป็น 0 จะถูกละเว้น)
MinuserZoom: การลดลงของภาพที่เล็กที่สุด ค่าเริ่มต้น = 0.5 (ตั้งค่าเป็น 0 จะถูกละเว้น)
Mousewheelspeed: ความไวในการตอบสนองต่อล้อเมาส์ ค่าเริ่มต้น = 500 (MS)
NextPrevioussLidespeed: กี่มิลลิวินาทีจะล่าช้าหลังจากคลิกที่ปุ่มก่อนหน้าและถัดไป default = 0 (สวิตช์ทันที)
Preventhide: ป้องกันไม่ให้ผู้ใช้ปิดการถ่ายภาพ นอกจากนี้ยังจะซ่อนปุ่มปิด "ปิด" บนแถบเครื่องมือ ใช้ในหน้าสุดพิเศษ (ตัวอย่างคือตัวอย่าง/08-exclusive-mode.html ในซอร์สโค้ด) ค่าเริ่มต้น = false
PreventsLideshow: บล็อกโหมดการเล่นอัตโนมัติ นอกจากนี้ยังจะซ่อนปุ่มเล่นในแถบเครื่องมือ ค่าเริ่มต้น = false
SlideshowDelay: ใช้เวลาเล่นภาพถัดไปในโหมดเล่นอัตโนมัตินานแค่ไหน? ค่าเริ่มต้น = 3000 (MS)
Slidespeed: เวลาที่ภาพเลื่อนเข้าไปในมุมมอง ค่าเริ่มต้น = 250 (MS)
Swipethreshold: จำนวนพิกเซลที่ใช้ในการเลื่อนนิ้วเพื่อกระตุ้นเหตุการณ์ท่าทางการปัด ค่าเริ่มต้น = 50
Swipetimethreshold: กำหนดจำนวนสูงสุดของมิลลิวินาทีเพื่อกระตุ้นท่าทางการปัด หากช้าเกินไปมันจะไม่กระตุ้นสไลด์และจะลากตำแหน่งของภาพถ่ายปัจจุบันเท่านั้น ค่าเริ่มต้น = 250
SlidetimingFunction: ฟังก์ชั่นการผ่อนคลายเมื่อเลื่อน Default = "Ease-Out"
ZINDEX: ค่า zindex เริ่มต้น ค่าเริ่มต้น = 1,000
EnableUiWebViewRepositionTimeOut: ตรวจสอบว่าการวางแนวของอุปกรณ์มีการเปลี่ยนแปลงหรือไม่ ค่าเริ่มต้น = false
UIWebViewResetPositionDelay: เวลาในการตรวจสอบว่าทิศทางของอุปกรณ์เปลี่ยนเป็นประจำคือ 500 (MS)
PreventDefaultTouchEvents: บล็อกเหตุการณ์การสัมผัสเริ่มต้นเช่นการเลื่อนหน้า default = true
เป้าหมาย: ต้องเป็นองค์ประกอบ DOM ทางกฎหมาย (เช่น DIV) ค่าเริ่มต้นคือหน้าต่าง (หน้าเต็ม) หากเป็น DOM ระดับต่ำมันจะแสดงใน DOM และอาจไม่เต็มหน้าจอ
หากคุณไม่จำเป็นต้องแสดงหน้าแรกและแสดงหน้าสองโดยตรงคุณสามารถตั้งค่าได้เช่นนี้:
$ (เอกสาร) .ready (function () {// ตั้งค่า photoswipe, การตั้งค่า "preventhide: true" var thumbels = code.photoswipe ('a', '#gallery', {preventhide: true}); code.photoswipe.current.show (0);});แน่นอนปลั๊กอินนี้มีฟังก์ชั่นการฟังอื่น ๆ อีกมากมาย:
document.addeventListener ('domcontentloaded', function () {// onbeforeshow เรียกวิธีนี้ก่อนที่แกลเลอรี่จะแสดงขึ้น. code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforeshow code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onshow, ฟังก์ชั่น (e) {console.log ("onbeforeshow");}); console.log ("onshow");}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onhide, ฟังก์ชั่น (e) {console.log ('onhide');}); console.log ('onshownext');}); code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.ondisplayimage, ฟังก์ชั่น (e) {console.log ('ondisplayimage');}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onresetposition, ฟังก์ชั่น (e) {console.log ('onresetposition'); เมื่อแกลเลอรี่เริ่มต้น SlideshowCode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstart, ฟังก์ชั่น (e) {console.log ('onslideshowstart');}; code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onslideshowstop, ฟังก์ชั่น (e) {console.log ('onslideshowstop');}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarshow, ฟังก์ชั่น (e) {console.log ('onbeforecaptionandtoolbarshow');}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarhide, ฟังก์ชั่น (e) {console.log ('onbeforecaptionandtoolbarhide');}); onbeforecaptionandtoolbarhide มักจะกระตุ้น onbeforecaptionandtoolbarhide หรือ onbeforecaptionandtoolbarhide code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onviewstrick, ฟังก์ชั่น },เท็จ);เนื่องจากวิธีการโทรของอินเทอร์เฟซ API ไม่พบในเว็บไซต์ทางการ Photoswipe และระดับปัจจุบันของ JS ไม่ดีมากอินเตอร์เฟส API บางส่วนจึงไม่เป็นที่เข้าใจกัน อย่างไรก็ตามเมื่อฉันตรวจสอบตัวอย่างของฉันฉันพบว่าตัวแปรมักจะปรากฏขึ้นรหัส photoswipe หรือ code.photoswipe.current พวกเขาทั้งหมดดำเนินการในคอนโซล เมื่อฉันป้อน code.photoswipe เนื้อหาต่อไปนี้จะปรากฏขึ้น:
แม้ว่าคุณจะไม่เข้าใจว่ามันคืออะไร แต่คุณจะเห็นว่าองค์ประกอบปัจจุบันรวมอยู่ด้วย จากนั้นป้อน code.photoswipe.current ในคอนโซลเพื่อรับเนื้อหาต่อไปนี้:
คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่นี่ตัวอย่างเช่น: CurrentIndex ระบุว่าภาพปัจจุบันถูกจัดทำดัชนีในรายการและการเชื่อมต่อทั้งหมดคือ code.photoswipe.current.currentIndex แสดงถึงตำแหน่งที่จัดทำดัชนีของภาพปัจจุบัน ข้อมูลนี้สำคัญมากสำหรับฉัน เราสามารถแสดงข้อมูลหน้าเว็บที่แตกต่างกันในหน้าต่างๆผ่านข้อมูลนี้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น