การใส่ภาพ แบบ lightbox



การใส่ภาพ light box

สามารถทำการ "การใส่ภาพ แบบ lightbox" ได้โดยมีขั้นตอน ดังนี้ 
 
  1. Login เข้าใช้งานเว็บไซต์สำเร็จรูป Ninenic
  2. เมื่อท่าน Add page เรียบร้อยแล้ว ต้องการที่จะเลือก Shortcodes ให้ไปที่ Row ที่ต้องการ
  3. คลิก Row setting จะมี Pop up เล็กๆ ขึ้น ให้คลิก Insert Shortcodes
  4. เลือกรูปแบบ ภาพ Light box
  5. คลิกที่ เปิดหน้าหน้าต่างจัดการไฟล์ที่อัปโหลด
  6. ให้คลิกเลือกรูปภาพ ที่ได้ทำการอัปโหลดไป จากนั้น คลิก Link
  7. ลบช่อง "ความสูง" ออก
  8. เมื่อ ลบขนาดรูปภาพแล้ว ให้คลิก ตกลง
  9. เมื่ออัปโหลดภาพ Light Box เรียบร้อยแล้ว ให้คลิก Save Change

     

ตัวอย่างการใส่ภาพ แบบ lightbox

1. เมื่อท่าน Add page เรียบร้อยแล้ว ต้องการที่จะเลือก Shortcodes ให้ไปที่ Row ที่ต้องการ  จากนั้นคลิก Row setting จะมี Pop  up เล็กๆ ขึ้น  ให้คลิก Insert Shortcodes ดังภาพ 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

2. จากนั้นจะแสดงหน้าจอดังภาพ ให้ท่านเลือก คลิกที่ Light box

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

3. คลิก  Icon Zoom เพื่อ ดูตัวอย่างภาพ Light box 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox


 

4. เลือกรูปแบบ Light box  ที่ต้องการโดยการคลิก Select

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

5. เมื่อเลือกรูปแบบ Light box ได้แล้ว จะกลับสู่หน้าแก้ไข Web page  ใส่รูปภาพที่ต้องการโดย Double click ที่รูปภาพ เพื่อเปิดหน้าต่างจัดการไฟล์

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

6. คลิกที่ เปิดหน้าต่างจัดการไฟล์อัพโหลด 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

7. ทำการเลือกไฟล์ภาพ ที่อยู่ในคอมพิวเตอร์

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox


 

8. เลือกรูปภาพที่ต้อง จากนั้น คลิก เปิด  

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

9. เมื่อเลือกรูปแล้ว คลิก อัปโหลดไฟล์

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

10. เมื่ออัปโหลดไฟล์ เรียบร้อยแล้วให้ คลิก Close 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

11. จากนั้น ให้ลากเมาส์ครอบคลุม บริเวณรูปภาพ

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox


 

12. คลิก เมนูรูปภาพ   

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

13. ปรากฎหน้าต่างดังภาพ ให้คลิกที่ เปิดหน้าหน้าต่างจัดการไฟล์ที่อัปโหลด

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

14. ให้คลิกเลือกรูปภาพ ที่ได้ทำการอัปโหลดไป จากนั้น คลิก Link 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

15. ลบช่อง "ความสูง" ออก

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox


 

16. เมื่อ ลบขนาดรูปภาพแล้ว ให้คลิก ตกลง  

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

17. เมื่ออัปโหลดภาพ Light Box เรียบร้อยแล้ว ให้คลิก Save Change

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

18. Double click ที่ภาพ เพื่อทำการใส่ลิงค์ 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

19. คลิกที่ เปิดหน้าหน้าต่างจัดการไฟล์ที่อัปโหลด

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox


 

20. ให้คลิกที่ชื่อรูปภาพ จากนั้น คลิก Link 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

21. เมื่อกำหนดลิ้งค์ครบทุกรูปภาพ แล้วให้คลิก ตกลง

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

22. จากนั้น ให้คลิก Save Change เพื่อบันทึก  



ตัวอย่างการแสดงภาพแบบ lightbox

การแสดงภาพแบบ lightbox ก่อนกด Zoom 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox

 

การแสดงภาพแบบ lightbox แบบกด Zoom แล้ว

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใส่ภาพ แบบ lightbox


 

เพจที่เกี่ยวข้อง