เมื่อทำหน้าเว็บประเภทบทความคุณมักจะต้องเผชิญกับความจำเป็นในการคลิกเพื่อดูภาพขนาดใหญ่ Lightbox2 เป็นปลั๊กอิน jQuery ที่ยอดเยี่ยมในบรรดาผลิตภัณฑ์มากมาย ฉันจะไม่เข้าไปดูรายละเอียดเกี่ยวกับการกำหนดค่า วันนี้ส่วนใหญ่ฉันต้องการแบ่งปัน: วิธีซูมภาพผ่านล้อเลื่อนเมาส์หลังจากคลิกที่ภาพขนาดใหญ่
1. แก้ไขซอร์สโค้ด Lightbox เพื่อรองรับการปรับสเกลล้อ
การสนับสนุนล้อเมาส์ส่วนใหญ่ผูกกล่องป๊อปอัพทั้งหมดกับเหตุการณ์ Mousewheel, Open Lightbox.js และค้นหา Lightbox.prototype.build = function () {... } คุณสามารถผูกเหตุการณ์ล้อเลื่อนสโครลที่ต้องการได้ที่นี่ (เมื่อมีการเริ่มต้น Lightbox) ตัวอย่างเช่นเพิ่มรหัสต่อไปนี้ที่ส่วนท้ายของฟังก์ชั่น:
การคัดลอกรหัสมีดังนี้:
// การซูมล้อรูปภาพ
this.img = this. $ container.find ('. lb-image');
this.label = this. $ lightbox.find ('. lb-datacontainer');
$ ([this. $ overlay [0], this. $ lightbox [0]]). bind ("mousewheel", ฟังก์ชั่น (e) {
var flag = e.originalevent.wheeldelta <0;
var imgh = self.img.height ();
var imgw = self.img.width ();
var nw = math.round (20*imgw/imgh);
var cth = self. $ outerContainer.height ();
var ctw = self. $ outerContainer.width ();
var layh = self. $ overlay.height ()-20;
var layw = self. $ overlay.width ()-20;
// ลง
if (flag && imgh> 20 && imgw> 20) {
self.img.css ('ความสูง', imgh - 20);
self.img.css ('width', imgw - nw);
Self. $ OUTERCONTAINER.CSS ('ความสูง', CTH - 20);
Self. $ OUTERCONTAINER.CSS ('WIDTH', CTW - NW);
if (ctw-nw> 240) {
self.label.css ('width', ctw - nw);
-
} อื่นถ้า (! Flag && imgh <layh && imgw <layw) {
self.img.css ('ความสูง', imgh + 20);
self.img.css ('width', imgw + nw);
ตนเอง $ outerContainer.css ('ความสูง', cth + 20);
Self. $ OUTERCONTAINER.CSS ('WIDTH', CTW + NW);
self.label.css ('ความกว้าง', ctw + nw);
-
E.StopPropagation ();
กลับเท็จ;
-
รหัสนั้นง่ายต่อการเข้าใจซึ่งคือการเพิ่มการตรวจสอบล้อเมาส์ลงในพื้นหลังและภาพด้านหน้าจากนั้นปรับขนาดความสูงและความกว้างตามสัดส่วน (ม้วนขึ้นเพื่อซูมเข้าเลื่อนลงเพื่อซูมออก) ฉันตั้งค่าความสูงเปลี่ยนเป็น 20 พิกเซลในแต่ละครั้งจากนั้นความกว้างจะเปลี่ยนตามสัดส่วน สิ่งที่ควรสังเกตคือขนาดต่ำสุดของรูปภาพควรลดลงและการขยายรูปภาพต้องไม่เกินขีด จำกัด ช่วงหน้าจอ ในเวลาเดียวกันสำหรับประสบการณ์ที่ดีขึ้นคุณต้องเพิ่ม E.StopPropagation () และกลับมาเป็นเท็จเพื่อป้องกันไม่ให้เบราว์เซอร์เลื่อน
2. แก้ไขซอร์สโค้ด Lightbox เพื่อรองรับรูปภาพ Base64
มันอาจจะลำบากกว่าที่จะพูดคุยเกี่ยวกับที่นี่ ก่อนอื่นให้ดูที่ข้อกำหนดรูปแบบรหัส HTML เมื่อใช้ Lightbox ดั้งเดิม:
การคัดลอกรหัสมีดังนี้:
<a href = "img/image.jpg" data-lightbox = "test"> ภาพ #1 </a>
นี่คือภาพป๊อปอัพที่ง่ายที่สุด เมื่อคลิกภาพ #1 Lightbox จะปรากฏขึ้นเพื่อแสดงเนื้อหาของ img/image.jpg (องค์ประกอบ <img src = "img/image.jpg"/>)
ตอนนี้ลองพิจารณาสถานการณ์นี้ถ้าภาพถูกเข้ารหัสใน Base64 บนเซิร์ฟเวอร์และเก็บไว้ในฐานข้อมูล? มันควรจะเป็นเช่นนี้:
การคัดลอกรหัสมีดังนี้:
<a href = "data: image/png; base64, ivborw ... " data-lightbox = "ทดสอบ"> ภาพ #1 </a>
ปัญหาคือความยาวของ HREF ถูก จำกัด ภายใต้ IE ไม่สามารถวางภาพขนาดใหญ่ในฟิลด์ HREF และรูปภาพจะถูกตอน (เฉพาะส่วนบนเท่านั้นที่แสดง)
มีอีกสถานการณ์ทั่วไป ถ้าฉันแสดงภาพเล็ก ๆ ครั้งแรกและคลิกที่ภาพเล็ก ๆ เพื่อดูภาพขนาดใหญ่มันควรจะเป็นเช่นนี้:
การคัดลอกรหัสมีดังนี้:
<a href = "data: image/png; base64, ivborw ... " data-lightbox = "test">
<img src = "data: image /png; base64, ivborw ... " />
</a>
ตกลงมีข้อมูล Base64 ที่ซ้ำกันสองรายการและพวกเขาทั้งหมดถูกส่งจากฝั่งเซิร์ฟเวอร์ซึ่งใช้เวลาและแบนด์วิดท์
ดังนั้นฉันจึงแก้ไขตามความต้องการของฉันรหัสนั้นง่ายมากปรับเปลี่ยนฟังก์ชั่นย่อยใน Lightbox.prototype.start = ฟังก์ชั่น ($ ลิงก์) {... } addtoalbum:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น addtoalbum ($ link) {
self.album.push ({
// ลิงค์: $ link.attr ('href')
ลิงค์: $ link.children (). attr ("src"),
ชื่อเรื่อง: $ link.attr ('data-title') || $ link.attr ('title')
-
-
ส่วนที่แสดงความคิดเห็นเป็นต้นฉบับ $ link เป็นแท็ก A ในรหัส HTML ก่อนหน้า หลังจากการปรับเปลี่ยนฟังก์ชั่นของฟังก์ชั่น addtoalbum คือ: เมื่อตั้งค่า SRC สำหรับการโผล่ขึ้นมารูปภาพจะไม่ใช้ตัวละครจาก HREF ดั้งเดิมอีกต่อไปเป็น SRC สำหรับการโผล่ขึ้นมาแท็ก IMG โดยตรง แต่พบแอตทริบิวต์ SRC จากองค์ประกอบลูกของแท็ก เนื่องจากความยาวของแอตทริบิวต์ SRC ไม่ จำกัด จึงไม่มีปัญหาในการตัดทอนภาพ
3. ใช้ Lightbox กับบทความที่มีอยู่
ส่วนที่ 2 ได้พูดคุยกันแล้วเกี่ยวกับความจริงที่ว่า HTML มีรูปแบบบางอย่างเมื่อใช้ Lightbox หากรูปภาพในบทความที่มีอยู่คือ <img src = "img/image.jpg"> จะต้องถูกห่อหุ้มในชั้นเดียว:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น initlightbox () {
var imgs = $ (". lightbox-container") ค้นหา ('img');
$ .Each (imgs, function (i) {
var img = $ (imgs [i]);
img.wrap ("<a href = '' data-lightbox = 'test'> </a>");
-
-
ในหมู่พวกเขา "Lightbox-container" เป็นคลาสของคอนเทนเนอร์ที่บทความตั้งอยู่ ควรวางฟังก์ชั่น initlightbox เมื่อโหลดหน้าพร้อมมันจะห่อหุ้มแท็ก IMG ทั้งหมดในบทความลงในรูปแบบ Lightbox
นั่นคือทั้งหมดสำหรับบทความนี้ คะแนน 2 และ 3: คุณสามารถใช้มันในสถานการณ์การใช้งานของคุณเอง การโฟกัสของการเปลี่ยนแปลงของ Lightbox คือการรองรับการปรับสเกลล้อ
แนบ lightbox ที่แก้ไข http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar