19 มี.ค.54 เนื่องจากเห็นตัวอย่างภาพที่นำเสนอใน facebook.com ซึ่งใช้หลักการคล้ายกับ lightbox script แต่เดิมการนำเสนอภาพที่มีขนาดใหญ่ จะตกขอบของ windows screen แต่ใน facebook ไม่มีตกครับ ประกอบกับคิดจะรวมเอกสารส่วนบุคคลให้มองเห็นทั้งฉบับใน windows screen จึงต้องแก้ไข code ของ light box เพื่อให้การนำเสนอภาพกว้างไม่เกิน 800px และสูงไม่เกิน 500px ซึ่งแก้ไข 2 จุดคือ
จุดแรก แก้แฟ้ม lightbox.css
จาก #lightbox img{width:auto; height:auto;}
เป็น #lightbox img{max-width:800px; max-height:600px;}
จุดที่สอง แก้แฟ้ม lightbox.js
จาก
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
เป็น
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
if (imgPreloader.height > 500 || imgPreloader.width > 800) {
var sc = imgPreloader.height / 500;
if (imgPreloader.width > 800) { sc = imgPreloader.width / 800; }
this.resizeImageContainer((imgPreloader.width / sc), (imgPreloader.height / sc));
} else {
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}
}).bind(this);
แนะนำเว็บไซต์
+ http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
+ http://blog.lysender.com/2010/07/scale-image-lightbox-another-javascript-hack/
+ http://www.thaiall.com/blog/burin/2440/
ถ้าจะให้รูปที่เป็นรูปใหญ่หลังจากคลิกแล้ว ไปโชว์ติดมุม บน-ซ้าย ต้องไปแก้ตรงส่วนไหนเหรอครับ
รบกวนด้วยครับ ขอบคุณล่วงหน้าครับ
ขอบคุณมากครับ ^^