Skip to content

Lightbox Gallery

เป็นระบบแสดงรูปภาพ / วีดีโอ ในรูปแบบ Lightbox โดยซื้อ License แบบ Extended Commercial license มาจาก lightGallery

Enable Lightbox Gallery

  1. เปิดการใช้งานที่ Customizer → Extension → Lightbox Gallery เลือก Enable lightGallery.js

Add Gallery

  1. ไปหน้า Page หรือ Post ที่ต้องการ เลือก Block ชื่อว่า Gallery

Link to image file

  1. ตั้งรูปภาพลิงก์ให้เป็น Link to image file

นอกจากการใช้ Gallery Block เราสามารถเพิ่มรูปภาพแล้วสั่งเปิด Lightbox ได้ โดย

Lighbox for custom image

  1. ใส่ลิงก์ไปที่รูปภาพที่ต้องการเปิดใน Lightbox
  2. เพิ่ม CSS ชื่อคลาส s-lg ในช่อง Additional CSS Class ที่ลิงก์นี้ หรือเพิ่มที่ Group / Container ที่ครอบลิงก์นี้ก็ได้

ให้เพิ่มคลาส s-lg เหมือนด้านบน แต่ไม่ต้องใส่ลิงก์ แล้วเพิ่ม data-src ให้ค่าเป็น url ตามที่ต้องการ

หมายเหตุ: การเพิ่ม data-src หากไม่ต้องการเขียนโค้ด แนะนำปลั๊กอิน Attributes for Blocks หรือ GenerateBlocks Pro