Photoswipe เป็นอัลบั้ม/เกมภาพถ่ายที่ออกแบบมาโดยเฉพาะสำหรับอุปกรณ์สัมผัสมือถือ เข้ากันได้กับเบราว์เซอร์ iPhone, iPad, BlackBerry 6+ และเดสก์ท็อปทั้งหมด การใช้งานพื้นฐานจะขึ้นอยู่กับ HTML/CSS/JavaScript และเป็นผลิตภัณฑ์อัลบั้มภาพถ่ายฟรีและโอเพ่นซอร์ส
เพื่อใคร
ให้ไซต์มือถือสัมผัสกับอัลบั้มของอัลบั้มเช่นแอพดั้งเดิม
คุณสมบัติที่ยอดเยี่ยม
Photoswipe ให้ผู้ใช้กับอินเทอร์เฟซแบบโต้ตอบอัลบั้มที่คุ้นเคยและใช้งานง่าย
เว็บไซต์ทางการ
http://www.photoswipe.com/
ตัวอย่างซอร์สโค้ด
http://github.com/downloads/codeComputerlove/photoswipe/code.photoswipe-3.0.5.zip
คนอื่น ๆ
https://github.com/codecomputerlove/photoswipe
การสาธิตออนไลน์
http://www.photoswipe.com/latest/examples/04-jQuery-mobile.html
คุณสมบัติความเข้ากันได้
Photoswipe เข้ากันได้กับอุปกรณ์มือถือจำนวนมากและไลบรารีคลาส JavaScript ที่เป็นที่นิยมทั้งหมด/กรอบการพัฒนา มีทั้งรุ่นที่ใช้ jQuery รุ่นที่ไม่มี jQuery และเวอร์ชันที่เข้ากันได้กับมือถือ jQuery แน่นอนว่าทั้งหมดอยู่ในแพ็คเกจตัวอย่างซอร์สโค้ดทั้งหมด
วิธีใช้
Photoswipe เป็นไลบรารี JavaScript อิสระที่สามารถรวมเข้ากับเว็บไซต์ของคุณได้อย่างง่ายดาย มีการเพิ่มประสิทธิภาพจำนวนมากสำหรับเบราว์เซอร์มือถือ (webkits) แน่นอนสำหรับเบราว์เซอร์เดสก์ท็อปและ jQueryMobile รุ่นที่สอดคล้องกันนั้นมีอยู่ในแพ็คเกจซอร์สโค้ด
การอ้างอิงห้องสมุดชั้นเรียน
<!- ภาพถ่ายอ้างอิง Klass มาก่อน หากคุณต้องการเพิ่มความเร็วในการโหลดคุณสามารถเพิ่มแท็ก/แอตทริบิวต์ที่เลื่อนออกไปในสคริปต์->
<script type = "text/javascript" src = "klass.min.js"> </script>
<!- หมายเหตุสำคัญหากคุณไม่ได้ใช้เวอร์ชัน jQuery ข้อผิดพลาดจะเกิดขึ้นภายใต้ IE แน่นอนถ้าคุณใช้เวอร์ชัน jQuery คุณต้องแนะนำ jQuery->
<script type = "text/javascript" src = "code.photoswipe-3.0.5.min.js"> </script>
รหัสโทร
/* เพิ่มการฟังเหตุการณ์ domcontentloaded คล้ายกับฟังก์ชั่น Ready ของ JQuery
วิธีการเริ่มต้นตัวอย่าง/01-efault.html
โปรดตรวจสอบ. examples/09-exclusive-mode-no-thumbnails.html สำหรับโหมดไม่มีรูปขนาดย่อ
-
// วิธีการ photoswipe.attach ได้รับ 3 พารามิเตอร์ (การรวบรวมองค์ประกอบ HTML ข้อมูลการกำหนดค่าที่เป็นตัวเลือกและ ID ประเภทสตริงเสริมเมื่อหลายอินสแตนซ์)
document.addeventListener ('domcontentloaded', function () {
// ตั้งค่า photoswipe เพื่อผูกกับแท็กทั้งหมด <a> ภายใต้คอนเทนเนอร์ด้วย ID เป็นแกลเลอรี่ คลิกเพื่อเปิดใช้งาน
// วัตถุที่นี่เป็นอินสแตนซ์ของภาพถ่ายและคุณสามารถใช้วิธีการที่สอดคล้องกันเช่น show (0), hide () ฯลฯ
var myphotoswipe = code.photoswipe.attach (window.document.QuerySelectorall ('#แกลเลอรี่ a'), {enableMouseWheel: false, enablekeyboard: false});
}, เท็จ);
หากคุณใช้ jQuery รหัสการโทรมีดังนี้:
// jQuery เวอร์ชันไฟล์ JS ที่เกี่ยวข้องจะต้องมีการเปลี่ยนแปลงในไฟล์ JS
// ดูตัวอย่าง/02-jQuery.html สำหรับรายละเอียดสำหรับตัวอย่าง
$ (เอกสาร) .ready (function () {
// วัตถุที่นี่เป็นอินสแตนซ์ของภาพถ่ายและคุณสามารถใช้วิธีการที่สอดคล้องกันเช่น show (0), hide () ฯลฯ
var myphotoswipe = $ ("#gallery a"). photoswipe ({enablemousewheel: false, enablekeyboard: false});
-
รหัส HTML
<!- ul li และสิ่งอื่น ๆ ที่ใช้ในการแสดงภาพขนาดย่อและยังสามารถปรับได้ตามต้องการ องค์ประกอบ <IMG> ด้านล่างเป็นรูปขนาดย่อ หากไม่จำเป็น SRC สามารถตั้งค่าเป็นว่าง ->
<ul id = "แกลเลอรี่">
<li> <a href = "images/full/01.jpg"> <img src = "images/thumb/01.jpg"/> </a> </li>
<li> <a href = "images/full/02.jpg"> <img src = "images/thumb/02.jpg"/> </a> </li>
<li> <a href = "images/full/03.jpg"> <img src = "images/thumb/03.jpg"/> </a> </li>
<li> <a href = "images/full/04.jpg"> <img src = "images/thumb/04.jpg"/> </a> </li>
<li> <a href = "รูปภาพ/เต็ม/05.jpg"> <img src = "รูปภาพ/thumb/05.jpg"/> </a> </li>
<li> <a href = "images/full/06.jpg"> <img src = "images/thumb/06.jpg"/> </a> </li>
</ul>
คำอธิบายพารามิเตอร์
1.ALLOWUSERZOOM: อนุญาตให้ผู้ใช้ดับเบิลคลิกเพื่อขยาย/ย้ายเพื่อดูรูปภาพ ค่าเริ่มต้น = จริง
2.AutostartSlideshow: เมื่อเปิดใช้งาน Photoswipe สไลด์โชว์จะถูกเล่นโดยอัตโนมัติ ค่าเริ่มต้น = false
3.LallowrotationonuserZoom: รองรับโดย iOS เท่านั้น - อนุญาตให้ผู้ใช้หมุนภาพด้วยท่าทางในโหมดซูม/แพน ค่าเริ่มต้น = false
4.BackButtonHideenabled: กดปุ่ม Return เพื่อซ่อนสไลด์อัลบั้ม ส่วนใหญ่ใช้โดย Android และ Blackberry รองรับ BB6, Android v2.1, iOS 4 และรุ่นใหม่ ค่าเริ่มต้น = จริง
5.CaptionAndToolBaraUtoHidedElay: เวลาหน่วงเวลาที่ซ่อนอยู่โดยอัตโนมัติโดยแถบชื่อเรื่องและแถบเครื่องมือ ค่าเริ่มต้นคือ = 5000 (MS) หากตั้งค่าเป็น 0 มันจะไม่ถูกซ่อนไว้โดยอัตโนมัติ (แตะ/คลิกเพื่อสลับมองเห็นและซ่อนอยู่)
6.CaptionAndToolBarflipposition: สลับแถบชื่อเรื่องและแถบเครื่องมือ (ปล่อยให้คำบรรยายแสดงที่ด้านล่างและแถบเครื่องมือจะแสดงที่ด้านบน) ค่าเริ่มต้น = false
7.Captionandtoolbarhide: ซ่อนแถบชื่อเรื่องและแถบเครื่องมือ ค่าเริ่มต้น = false
8.CaptionAndToolBaropacity: ความโปร่งใสของแถบชื่อเรื่องและแถบเครื่องมือ (0-1) ค่าเริ่มต้น = 0.8
9.CaptionAndToolBarShowEmpyCaptions: แถบชื่อเรื่องจะปรากฏขึ้นแม้ว่าชื่อของภาพปัจจุบันจะว่างเปล่า ค่าเริ่มต้น = จริง
10.CacheMode: โหมดแคช, code.photoswipe.cache.mode.normal (ค่าเริ่มต้น, ปกติ) หรือ code.photoswipe.cache.mode.aggressive (Radical, active) ตัดสินใจว่า Photoswipe จัดการแคชอิมเมจแคชได้อย่างไร
11. โหมดก้าวร้าวจะตั้งค่าประเภทของภาพที่ไม่ใช่ "ปัจจุบันก่อนหน้าก่อนหน้า" ถัดไป "ที่ว่างเปล่า มันจะเป็นประโยชน์สำหรับหน่วยความจำล้นในเบราว์เซอร์ iOS รุ่นเก่า ในกรณีส่วนใหญ่โหมดปกติก็โอเค
12.DoubleTapSpeed: ช่วงเวลาสูงสุดสำหรับการดับเบิลคลิก ค่าเริ่มต้น = 300 (MS)
13.DoubleTapZoomlevel: เมื่อผู้ใช้ดับเบิลคลิกที่สองกำลังขยายเป็นระดับ "ซูมเข้า" เริ่มต้น ค่าเริ่มต้น = 2.5
14.EnabledRag: อนุญาตให้ลากภาพก่อนหน้า/ถัดไปไปยังอินเทอร์เฟซปัจจุบัน ค่าเริ่มต้น = จริง
15.EnableKeyBoard: อนุญาตให้ใช้งานแป้นพิมพ์ (การสลับลูกศรซ้ายและขวาออกจาก ESC, เข้าสู่การเล่นอัตโนมัติ, การแสดงผลแถบอวกาศ/แถบชื่อเรื่องที่ซ่อนอยู่) default = true
16.enablemousewheel: อนุญาตให้ใช้งานล้อของเมาส์ default = true
17.FadeInspeed: ความเร็ว (ระยะเวลา) ขององค์ประกอบเอฟเฟกต์จางหายไปมิลลิวินาที ค่าเริ่มต้น = 250
18.FadeOutSpeed: ความเร็ว (ระยะเวลา) ขององค์ประกอบเอฟเฟกต์จางหายไปมิลลิวินาที ค่าเริ่มต้น = 250
19.imagescalemethod: วิธีการปรับขนาดภาพ (โหมด) ค่าเสริม: "พอดี", "fitnouscale" และ "ซูม" โหมด "พอดี" ทำให้มั่นใจได้ว่าภาพจะปรับให้เข้ากับหน้าจอ "Fitnouscale" คล้ายกับ "พอดี" แต่ไม่ได้ขยายภาพ "ซูม" จะคัดกรองภาพเต็มรูปแบบ แต่เป็นไปได้ว่าการปรับภาพไม่ได้สัดส่วนเท่า ๆ กัน default = "พอดี"
20.InvertMousewheel: กลับล้อเมาส์ โดยค่าเริ่มต้นการเลื่อนเมาส์ลงจะเปลี่ยนไปเป็นรูปภาพถัดไปและจนถึงภาพก่อนหน้า ค่าเริ่มต้น = false
21.JQueryMobile: ระบุว่าการถ่ายภาพรวมอยู่ในโครงการ JQuery Mobile หรือไม่ โดยค่าเริ่มต้น Photoswipe จะพยายามทำสิ่งนี้ให้คุณ
22.JQUERYMOBILEDIALOGHASH: แท็กแฮชของ JQUERY MOBILE ใช้ในหน้าหน้าต่างและหน้าโต้ตอบ ค่าเริ่มต้น = "& ui-state = กล่องโต้ตอบ"
23.loop: อัลบั้มจะวนซ้ำโดยอัตโนมัติหรือไม่ default = true
24.MARGIN: ช่วงเวลาระหว่างสองภาพหน่วยคือพิกเซล ค่าเริ่มต้น = 20
25.MaxUserZoom: กำลังขยายสูงสุด ค่าเริ่มต้น = 5.0 (ตั้งค่าเป็น 0 จะถูกละเว้น)
26.MinuserZoom: การลดลงที่เล็กที่สุดของภาพ ค่าเริ่มต้น = 0.5 (ตั้งค่าเป็น 0 จะถูกละเว้น)
27.MouSewHeelsPeed: ความไวในการตอบสนองต่อล้อเมาส์ ค่าเริ่มต้น = 500 (MS)
28. NEXTPREVIOUSSLIDESPEED: กี่มิลลิวินาทีจะล่าช้าเมื่อคลิกปุ่มก่อนหน้าและถัดไป default = 0 (สวิตช์ทันที)
29.Preventhide: ป้องกันไม่ให้ผู้ใช้ปิดการถ่ายภาพ นอกจากนี้ยังจะซ่อนปุ่มปิด "ปิด" บนแถบเครื่องมือ ใช้ในหน้าสุดพิเศษ (ตัวอย่างคือตัวอย่าง/08-exclusive-mode.html ในซอร์สโค้ด) ค่าเริ่มต้น = false
30.PREVENTSLIDESHOW: บล็อกโหมดการเล่นอัตโนมัติ นอกจากนี้ยังจะซ่อนปุ่มเล่นในแถบเครื่องมือ ค่าเริ่มต้น = false
31.SlideshowDelay: ใช้เวลานานแค่ไหนในการเล่นภาพถัดไปในโหมดเล่นอัตโนมัติ? ค่าเริ่มต้น = 3000 (MS)
32.Slidespeed: เวลาที่ภาพเลื่อนเข้าไปในมุมมอง ค่าเริ่มต้น = 250 (MS)
33.SwipeThreshold: นิ้วเลื่อนนิ้วไปกี่พิกเซลเพื่อกระตุ้นเหตุการณ์ท่าทางการปัด ค่าเริ่มต้น = 50
34.SwipetimetHreshold: กำหนดจำนวนสูงสุดของมิลลิวินาทีเพื่อกระตุ้นท่าทางการปัด หากช้าเกินไปมันจะไม่กระตุ้นสไลด์และจะลากตำแหน่งของภาพถ่ายปัจจุบันเท่านั้น ค่าเริ่มต้น = 250
35.SlidetimingFunction: ฟังก์ชั่นการผ่อนคลายเมื่อเลื่อน Default = "Ease-Out"
36.zindex: ค่า zindex เริ่มต้น ค่าเริ่มต้น = 1,000
37.EnableUiWebViewRepositionTimeOut: ตรวจสอบว่าการวางแนวของอุปกรณ์มีการเปลี่ยนแปลงหรือไม่ ค่าเริ่มต้น = false
38.UiWebViewResetPositionDelay: เวลาในการตรวจสอบว่าทิศทางของอุปกรณ์เปลี่ยนเป็นประจำคือ 500 (MS)
39.PreventDefaultTouchEvents: บล็อกเหตุการณ์การสัมผัสเริ่มต้นเช่นการเลื่อนหน้า default = true
40.Target: ต้องเป็นองค์ประกอบ DOM ทางกฎหมาย (เช่น DIV) ค่าเริ่มต้นคือหน้าต่าง (หน้าเต็ม) หากเป็น DOM ระดับต่ำมันจะแสดงใน DOM และอาจไม่เต็มหน้าจอ
ฟังก์ชั่นที่กำหนดเอง
getToolBar: function () { /*ส่งคืนสตริง HTML ที่จะแสดงในแถบเครื่องมือ* /}, getImageSource: ฟังก์ชั่น (EL) { /*บอกแกลเลอรี่วิธีรับ SRC ของภาพ โดยค่าเริ่มต้นแกลเลอรี่จะถือว่าคุณใช้แท็ก <a> เพื่อห่อรูปขนาดย่อ <IMG> และแอตทริบิวต์ HREF ของแท็ก <a> คือ URL ของภาพที่สมบูรณ์ ในเวลานี้วิธีนี้สามารถใช้เพื่อส่งคืนเส้นทางของรูปภาพขององค์ประกอบที่เกี่ยวข้อง มันสามารถเป็นได้ทุกชนิด ตัวอย่างเช่นแอตทริบิวต์ rel หรือบางสิ่งบางอย่าง มันจะง่ายกว่าที่จะมี jQuery */ return el.getAttribute ('rel'); }, getimagecaption: ฟังก์ชั่น (el) { /** เช่นวิธี getImageSource วิธีนี้จะส่งคืนชื่อของภาพ โดยค่าเริ่มต้นแกลเลอรี่จะมองหาแอตทริบิวต์ alt ของภาพ * /}, getimageMetadata: ฟังก์ชั่น (EL) { / ** หากคุณฟัง onDisplayImage คุณจะได้รับข้อมูลเมตาเพิ่มเติมผ่านฟังก์ชั่นนี้ และใช้ */ return ใน ondisplayimage {longdescription: el.getattribute (el, 'data-long-description')}}}สำหรับโทรศัพท์ Android การคลิกเพียงครั้งเดียวจะทำให้เกิดปัญหาการคลิกที่เลเยอร์ที่จะปิดและชั้นล่างจะยังคงกระตุ้นเหตุการณ์การคลิก ทางออกของเรามีดังนี้:
// ทริกเกอร์คลิกที่หลายระดับบนโทรศัพท์ Android เราใช้ตัวจับเวลาเพื่อสกัดกั้น var event_timeout = 500; // ป้องกันการทริกเกอร์เหตุการณ์หลายครั้ง // บล็อกเหตุการณ์ติดต่อกันในระยะเวลาอันสั้น var multiclickprevent = false; ฟังก์ชั่น preventmulticlick () {ถ้า (multiclickprevent) {return false; } multiclickprevent = true; window.settimeout (function () {multiclickprevent = false;}, event_timeout); กลับมาจริง; - // ปรับให้เข้ากับเบราว์เซอร์ var useragent = navigator.useragent; var likeios = useragent.match (/iPad | iPhone | iPod/i); var likeAndroid = useragent.match (/Android/i); var SpecialClick = "คลิก"; if (likeios) {specialclick = "touchstart คลิก"; } อื่นถ้า (likeAnDroid) {pippleClick = "TouchStart คลิก"; } /ตัวอย่าง $ (". t_right"). live (specialclick, function () {ถ้า (preventmulticlick ()) {// ดำเนินการอื่น ๆ } else {// อื่นคือการปฏิเสธการดำเนินการคุณสามารถส่งคืนเท็จหรือผลตอบแทนอื่น ๆ }}); // ตัวอย่าง $ ("body"). live (specialclick, function () {ถ้า (preventmulticlick ()) {// ดำเนินการอื่น ๆ }});ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น