ภาพตัวอย่างรูปภาพมือถือรองรับการดูตัวอย่างรูปภาพพีซีและส่วนใหญ่จะใช้สำหรับตัวอย่างรูปภาพมือถือสำหรับ Android และ iOS
แพ็คเกจทรัพยากร: Photoswipe-3.0.5
มีการดาวน์โหลดแพ็คเกจ 1.0.11 บนเว็บไซต์ทางการ Photoswipe แต่เวอร์ชัน 1.0.11 มีข้อบกพร่อง ในโทรศัพท์ Android บางรุ่นจะมีการกระโดด 2 ภาพเมื่อเลื่อนหนึ่งครั้ง
(ภายใต้สถานการณ์ปกติเลื่อนหนึ่งครั้งและกระโดด 1 ภาพ)
วิธีการใช้งานปกติมีดังนี้:
โหลดไฟล์ต่อไปนี้ในแพ็คเกจทรัพยากรในแท็กหัวของ HTML:
<script type = "text/javascript" src = "klass.min.js"> </script> <script type = "text/javascript" charset = "utf-8" src = "jQuery-1.8.2.js"> </script> <script type = "text/javascript src = "jQuery.transit.js"> </script> <script type = "text/javascript" charset = "utf-8" src = "jQuery.transit.js"> </script> <script type = "text/javaScript" charset = "utf-8" src = "hammer.js" charset = "utf-8" src = "jQuery.hammer.js"> </script>
รูปแบบของรูปภาพ HTML บางภาพมีดังนี้:
<ul id = "แกลเลอรี่"> <li> <a href = "รูปภาพ/full/001.jpg"> <img src = "ภาพ/นิ้วหัวแม่มือ/001.jpg"/> </a> </li> <li> <a href = "ภาพเต็ม/002.jpg" <li> <a href = "images/thumb/004.jpg"> <img src = "images/thumb/004.jpg"/> </a> </li> <li> <a href = "ภาพ/004.jpg"> <img src = "ภาพ/thumb/004.jpg href = "รูปภาพ/full/005.jpg"> <img src = "รูปภาพ/นิ้วหัวแม่มือ/005.jpg"/> </a> </li> <li> <a href = "ภาพ/full/006.jpg"> <img src = "ภาพ/thumb/006.jpg href = "รูปภาพ/full/008.jpg"/> </a> </li> <li> <a href = "ภาพ/นิ้วหัวแม่มือ/008.jpg"/> </a> </li> <li> <a href = "ภาพ/009.jpg"> <img src = "ภาพ/009. href = "รูปภาพ/เต็ม/010.jpg"> <img src = "รูปภาพ/นิ้วหัวแม่มือ/010.jpg"/> </a> </li> <li> <a href = "ภาพ/เต็ม/011.jpg"/> </a> </li> <li> href = "รูปภาพ/นิ้วหัวแม่มือ/012.jpg"/> </a> </li> <li> <a href = "ภาพ/เต็ม/012.jpg"/> </a> </li> <li> <a href = "ภาพ/เต็ม/013.jpg"> <img src = "ภาพ/013.jpg href = "รูปภาพ/เต็ม/014.jpg"> <img src = "รูปภาพ/นิ้วหัวแม่มือ/014.jpg"/> </a> </li> <li> <a href = "ภาพ/015.jpg"/</a> </li> <li> href = "รูปภาพ/เต็ม/016.jpg"/> </a> </li> <li> <a href = "ภาพ/นิ้วหัวแม่มือ/016.jpg"/> </a> </li> <li> <a href = "ภาพ/เต็ม/017.jpg" <li> <a href = "images/full/018.jpg"> <img src = "images/thumb/018.jpg"/> </a> </li></ul>
JS Part เรียกปลั๊กอินนี้ตามที่กล่าวไว้ในการสาธิต
(ฟังก์ชั่น (หน้าต่าง, photoswipe) {document.addeventListener ('domcontentloaded', function () {ตัวเลือก var = {}, อินสแตนซ์ = photoswipe.attach (window.document.QuerySelectorall ('#แกลเลอรี่ a'), ตัวเลือก);นอกจากนี้คุณยังสามารถใช้: $ ("#Gallery a"). photoswipe ();
หากส่วน HTML จำเป็นต้องมีรูปแบบพิเศษสามารถเรียกได้ในวิธีต่อไปนี้:
1. ประกาศตัวแปรทั่วโลก: var photoswipe_instance = 0;
2. สำหรับองค์ประกอบที่ต้องป้อนตัวอย่างเนื้อหามีดังนี้:
arr_images.push ({url: xxx}); var photoswipe = window.code.photoswipe; var อินสแตนซ์ = photoswipe.attach (arr_images, '', photoswipe_instance); photoswipe_instance ++; instance.show (show_current); 3. ค้นหาการเริ่มต้นใน photoswipe.cache.cacheclass: ฟังก์ชั่น (ภาพ, ตัวเลือก) {var i, j, cacheimage, ภาพ, src, คำอธิบายภาพ, ข้อมูลเมตา; this.settings = ตัวเลือก; this.images = []; สำหรับ (i = 0, j = images.length; i <j; i ++) {image = images [i]; // src = this.settings.getImagesource (รูปภาพ); // รหัสต้นฉบับ-ที่ใดที่เปลี่ยน src = image.url; // รหัสใหม่-ที่คำอธิบายการเปลี่ยนแปลง = this.settings.getimagecaption (รูปภาพ); metadata = this.settings.getimageMetadata (รูปภาพ); this.images.push (ใหม่ Photoswipe.image.imageclass (ภาพ, SRC, คำบรรยายภาพ, ข้อมูลเมตา)); -นอกจากนี้ยังมีปัญหากับปลั๊กอินและจำเป็นต้องทำการปรับเปลี่ยนต่อไปนี้:
ค้นหา photoswipe.documentoverlay.documentoverlayclass (เดิมมีปัญหากับการวางตำแหน่งและความสูงของพื้นหลังชั้นลอยที่นี่)
RESETPOSITION: function () {var width, ความสูง, ด้านบน; if (this.settings.target === หน้าต่าง) {width = util.dom.windowWidth (); // ความสูง = util.dom.bodyouterheight () * 2; // สิ่งนี้ครอบคลุมความสูงพิเศษที่เพิ่มโดย photoswipe // รหัสเก่า-ความสูงเปลี่ยน = util.dom.bodyouterheight (); // รหัสใหม่-สถานที่เปลี่ยน // top = (this.settings.jQueryMobile)? util.dom.windowscrolltop () + 'px': '0px'; // รหัสเก่า - ที่การเปลี่ยนแปลงอยู่ด้านบน = util.dom.windowscrolltop () + 'px'; // รหัสใหม่ - การเปลี่ยนแปลงคือ (ความสูง <1) {ความสูง = นี้ } if (util.dom.windowHeight ()> ความสูง) {ความสูง = util.dom.windowHeight (); }} else {width = util.dom.width (this.settings.target); ความสูง = util.dom.height (this.settings.target); top = '0px'; } util.dom.setstyle (this.el, {width: width, ความสูง: ความสูง, ด้านบน: ด้านบน}); -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น