สร้าง Lightbox แบบเต็มหน้าจอที่ตอบสนองและสวยงามด้วย BaguetteBox.js

มี ปลั๊กอิน Lightbox นับสิบ และพวกเขาทั้งหมดที่ดี ด้วยเหตุผลต่าง ๆ. บางคนทำงานได้ดีขึ้นในเว็บไซต์พอร์ตโฟลิโอ.

แต่หนึ่งในปลั๊กอินใหม่ที่ฉันชอบใช้คือ baguetteBox.js, สร้างโดยนักพัฒนา JavaScript Marek Grzybek.

แน่นอนปลั๊กอินนี้ใช้งานได้ฟรีและเปิดแหล่งที่มาบน GitHub หากคุณต้องการขุดลงในโค้ดด้วยตนเอง.

ห้องสมุด ไม่มีการอ้างอิงใด ๆ, เพื่อให้คุณสามารถรันได้โดยไม่ต้อง jQuery, Zepto หรืออย่างอื่น มันคือ ไลบรารี JavaScript ล้วนๆด้วยการตั้งค่าที่ง่ายมาก.

มันหมายถึง ทำงานได้อย่างสมบูรณ์บนอุปกรณ์พกพา, ดังนั้นจึงสามารถรองรับการปัดนิ้วและแตะพร้อมกับพฤติกรรมเริ่มต้นบนเดสก์ท็อปและแล็ปท็อป เป็นหนึ่งในแกลเลอรีแบบเต็มหน้าจอไม่กี่แห่ง รองรับการโต้ตอบบนมือถือพร้อมกับเอฟเฟกต์แบบกิริยา.

ตรวจสอบ หน้าตัวอย่าง เพื่อดูว่ามันทำงานจริง มันมีแกลเลอรี่ที่โดดเด่นพร้อมด้วย ต้องใช้รหัสหนึ่งบรรทัดเพื่อให้มันทำงานได้:

 baguetteBox.run ( 'baguetteBoxOne'); 

ดังนั้นสิ่งนี้ กำหนดเป้าหมายองค์ประกอบคอนเทนเนอร์ด้วยคลาส .baguetteBoxOne และแกลเลอรีทั้งหมดจะปิดการทำงาน.

คุณทำได้ ตั้งค่าตัวเลือกที่กำหนดเอง หากคุณต้องการสิ่งต่างๆเช่นคำอธิบายภาพลักษณะปุ่มคุณลักษณะโหลดล่วงหน้าและวิธีการโทรกลับสำหรับเหตุการณ์ onclick / onchange ตัวเลือกทั้งหมดเหล่านี้คือ มีเอกสารที่ดีใน GitHub ถ้าคุณอยากจะดำน้ำ.

แต่มันก็ไม่ได้ใช้อะไรมากไปกว่าการได้รับสิ่งนี้เกินกว่าองค์ประกอบของคอนเทนเนอร์และองค์ประกอบภาพพื้นฐานบางอย่าง.

คุณ มีการควบคุมเต็มรูปแบบ ในภาพเคลื่อนไหวขนาดภาพเอฟเฟกต์ปัดและเนื้อหาแกลเลอรีเช่นชื่อเรื่อง / คำบรรยายภาพ นี้ ต้องใช้ JavaScript, ดังนั้นมันจึงไม่มีทางเลือก CSS บริสุทธิ์สำหรับโมดอล แต่เนื่องจากเบราว์เซอร์ส่วนใหญ่รองรับ JavaScript จึงไม่น่าเป็นปัญหา.

หากต้องการเรียนรู้เพิ่มเติมให้ไปที่หน้าหลัก baguetteBox.js และคุณยังสามารถแบ่งปันความคิดของคุณกับผู้สร้างบน Twitter @feimosi.