Lightbox คือ การแสดงผลภาพหรือข้อมูลต่างๆ ที่เราต้องการให้ปรากฏเด่นชัดขึ้นมาบนหน้าจอลักษณะอยู่เหนือข้อมูลอื่นๆ คล้ายๆ กับ
ป๊อปอัพสมัย ก่อน เพียงแต่ไม่ได้มีการเปิดหน้าต่างขึ้นมาเหมือนป๊อปอัพ ปกติมักใช้กับภาพ เพื่อให้เกิดความน่าสนใจมากยิ่งขึ้น เพราะภาพจะเด่นขึ้นมาและข้อความอื่นๆ ในหน้านั้นก็จะถูกทำให้มืดลงไปเป็นต้น ปลั๊กอินแสดง lightbox นั้นมีหลายตัวแตกต่างกันไป ตั้งแต่แบบเบสิกไม่มีลูกเล่นอะไรเลย หรือแบบที่มีลูกเล่นเยอะ ปรับแต่งเยอะ ก็แล้วแต่ความถนัด แต่วันนี้เราจะมารีวิว Foobox ซึ่งเป็นแบบพรีเมี่ยมปลั๊กอินค่ะ
Fooboxคือปลั๊กอินสำหรับแสดง Lightbox แบบที่กล่าวไปแล้วข้างต้น โดยความสามรถต่างๆ ที่เด่นๆ ดังนี้
- รองรับการแสดงผลแบบ Responsive และ touchscreen บนมือถือ
- ทำงานร่วมกับ Gallery ของ WordPress และปลั๊กอินแกลลอรี่อื่นๆ เช่น Justified image grid, FooGallery, NextGEN Gallery, Envira Gallery เป็นต้น หรือกับสินค้าของ WooCommerce ก็ได้
- แสดง Caption ของภาพในลักษณะต่างๆ ได้
- มี Animation ในการเปิด lightbox หลายแบบ
- แสดงแบบ Full screen ได้
- แสดงปุ่มแชร์ social media เช่น Facebook, Twitter, Pinterest, Google+ และอื่นๆ
- แสดง Lightbox ได้ทั้งกับรูปภาพ โค้ด html เช่น form หรือ shortcode ต่างๆ ได้ เปิดลิงค์ (iFrame) ใน lightbox ได้ หรือเล่นวิดีโอก็ได้
License Keyหลังจากที่เราซื้อและดาวน์โหลดมาเรียบร้อยแล้ว เราจะได้ Licence key สำหรับมากรอกเพื่อรับการอัพเดตและ support ในแท็บ
General ตรง Foobox Licence key นะคะ (ถึงจะหมดอายุก็ยังสามารถใช้งานได้นะคะ เพียงแต่ไม่สามารถอัพเดตและติด support ได้ ซึ่งตั้งแต่ใช้มาก็ไม่เคยได้ใช้ support เลยเช่นกัน หลายปีแล้ว หากจะต่ออายุก็ต่อก่อนที่จะหมดอายุนะคะ จะได้ราคา 50%)
กำหนดรูปแบบของ Foobox
Look & Feel เป็นแท็บที่ใช้กำหนดลักษณะที่เราต้องการให้ Lightbox ปรากฏ สามารถเลือกโทนสี ลูกศร และตัว Loading เป็นต้น
Navigation Buttons ใช้สำหรับกำหนดว่าจะแสดงปุ่ม Navigation (เลื่อนรูป) แบบไหน
Animation
Opening/Closing Animation เลือกว่าจะแสดงเอฟเฟคเอนิเมชั่นในตอนเปิด/ปิด lightbox แบบไหน
Captionsเราสามารถเปิดปิดการแสดง Caption ได้ด้วยการติ๊กหรือไม่ติ๊กที่ช่อง
Show Image Captions ใน ที่นี้เราไม่ค่อยได้เขียน Caption ให้กับภาพเท่าไหร่ ก็เลยเอาออกนะคะ เพราะถ้าไม่ได้เขียน caption ให้กับภาพ มันก็จะดึงเอาชื่อไฟล์มาเป็น caption แทน (จริงๆ มันดึง Alt แต่ WordPress ตั้ง alt อัตโนมัติจากชื่อภาพ) บางภาพก็ขนาดเล็กมันจะได้ไม่บังด้วย Caption นี้จะเหมาะสำหรับทำเป็นแกลลอรี่รูปภาพมากกว่าเว็บของเราค่ะ
Full Screenที่แท็บ
Function เราสามารถกำหนดให้แสดงปุ่ม Full Screen ได้ ด้วยการติ๊กที่่ช่อง
Show Fullscreen Button
Slideshowเปิดการทำงานของ Slide show สำหรับ
Gallery โดย เมื่อมีหลายภาพในแกลลอรี่ ก็จะมีปุ่มให้กดเลื่อนไปภาพอื่นๆ ด้วย สามารถตั้งให้ทำงานอัตโนมัติ แสดงภาพที่เหลือ หรือวนไปเรื่อยๆ ก็ได้
Social Iconติ๊ก Social network ที่เราต้องการให้ผู้ใช้สามารถแชร์ได้ที่หัวข้อ
Network ของแท็บ
Social Iconกำหนดตำแหน่งให้กับไอคอนด้วยการเลือกที่หัวข้อ
Social Icon Positionการเปิดลิงค์ใน Fooboxให้เราแก้ไขลิงค์จากแบบปกติที่เราจะแทรกลิงค์ในหน้า Visual Editor ด้วยการเปลี่ยนไปใช้แบบ Text เพื่อแก้ไขแบบ Html แล้วเพิ่มโค้ด class="foobox" target="foobox" ในแท็ก a
เมื่อมีการคลิกที่ลิงค์ ก็จะมีการเปิด Lightbox เป็นแบบ iFrame ขึ้นมาสำหรับแสดงเพจนั้น
การเปิด Video ใน Foobox แทนที่เราจะวางลิงค์ของ Youtube ปกติซึ่ง WordPress จะแปลงเป็นวิดีโอให้โดยอัตโนมัติ เราก็อาจจะใช้ลิงค์แบบข้อความหรือรูปภาพแทน เพื่อเปิด Player ของ Youtube อีกที วิธีนี้ช่วยให้หน้าเว็บของเราโหลดเร็วกว่าการแทรกวิดีโอลงไปตรงๆ โดยเฉพาะหากเรามีวิดีโอหลายอันในหน้านั้น
ขั้นตอนแรกก็คือนำภาพมาวางเสียก่อน จากนั้นกำหนดลิงค์ให้รูปภาพด้วยการคลิก Edit ที่รูปภาพใส่ลิงค์ของวิดีโอในช่อง
Link To ของภาพ โดยเปลี่ยนเป็น
Custom URL เสียก่อน
ใส่ลิงค์ของวิดีโอในช่อง
Link To ของภาพ โดยเปลี่ยนเป็น
Custom URL เสียก่อน
จากนั้นไปแก้ไขลิงค์แบบ Text (Html) อีกเช่นเดิม โดยการเติมโค้ดแบบเดียวกันกับการเปิดหน้าเว็บใน Foobox ก่อนหน้า
เสร็จเรียบร้อย เมื่อมีการคลิกที่ภาพ ระบบก็จะเปิดวิดีโอขึ้นมาบน Foobox
วิธีการใช้งานและตัวอย่างอื่นๆ สามารถดูได้จาก
http://foobox.fooshowcase.com/ และ
http://docs.fooplugins.com/foobox/ สรุป Foobox เป็นปลั๊กอิน Lightbox พรีเมี่ยมอีกตัวที่ใช้งานได้ดีมาก โดยเฉพาะฟังชั่นเสริมเกี่ยวกับ animation และ social network และยังสามารถใช้ touch screen เลื่อนภาพได้สะดวกเมื่อเปิดดู gallery บนมือถือหรือแท็บเล็ตได้สะดวกอีกด้วย
ปลั๊กอิน Foobox แบบฟรีให้เราลองใช้ด้วย โดยก็จะไม่มีฟังชั่นหลายๆ อย่างแบบเวอร์ชั่นเสียตังค์ ซึ่งจะเน้นแค่แสดงรูปภาพเพียงอย่างเดียว ดาวโหลดได้ที่
wordpress.orgที่มา:
http://www.wpthaiuser.com/foobox/