วิดเจ็ตไลท์บ็อกซ์ช่วยให้ผู้ใช้ดูเนื้อหามัลติมีเดียในกล่องโต้ตอบแบบโมดัลได้
การใช้งานทั่วไป
นี่คือปุ่มตัวอย่างที่จะเปิดกล่องโต้ตอบไลท์บ็อกซ์
นี่คือแท็ก Anchor ที่มีแอตทริบิวต์ href ที่ตั้งค่าเป็น #lightbox-trigger และยังใช้เพื่อเปิดไลท์บ็อกซ์ได้
วิดีโอ YouTube
นี่คือตัวอย่างปุ่มที่เปิดกล่องโต้ตอบของวิดีโอ YouTube
นี่คือลิงก์ YouTube ที่เปิดกล่องโต้ตอบวิดีโอ YouTube
รูปภาพ
รูปภาพจะแสดงในกล่องโต้ตอบรูปแบบไลท์บ็อกซ์ด้วย วิธีนี้เหมาะอย่างยิ่งสําหรับการดูรายละเอียดของภาพหน้าจอโดยไม่ต้องเพิ่มรูปภาพเต็มความกว้าง
ลอยไปทางขวา
นี่เป็นตัวอย่างของรูปภาพที่ลอยอยู่ทางด้านขวาของเนื้อหาที่ อยู่ก่อนหน้า วิดเจ็ตนี้จะเปิดกล่องโต้ตอบโมเดลไลท์บ็อกซ์และแสดงเคล็ดลับเครื่องมือตัวอย่างรถเข็น
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Maga aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้น eint. sint occaecat Cupidatat not Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ลอยไปทางซ้าย
นี่เป็นตัวอย่างของรูปภาพที่ลอยอยู่ทางด้านซ้ายของเนื้อหาที่ อยู่ก่อนหน้า วิดเจ็ตนี้จะเปิดกล่องโต้ตอบรูปแบบไลท์บ็อกซ์ แต่ไม่แสดงเคล็ดลับเครื่องมือ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Maga aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้น eint. sint occaecat Cupidatat not Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
แสดงเมื่อมีการโหลดหน้าเว็บ
คุณอาจมีไลท์บ็อกซ์ที่เปิดขึ้นเมื่อโหลดหน้าเว็บได้โดยเพิ่มพารามิเตอร์สตริงการค้นหา dialogOnLoad ต่อท้ายด้วยรหัส