Foobox Responsive Lightbox

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 ได้ หรือเล่นวิดีโอก็ได้

Download

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 เสียก่อน

จากนั้นไปแก้ไขลิงค์แบบ Text (Html) อีกเช่นเดิม โดยการเติมโค้ดแบบเดียวกันกับการเปิดหน้าเว็บใน Foobox ก่อนหน้าเสร็จเรียบร้อย เมื่อมีการคลิกที่ภาพ ระบบก็จะเปิดวิดีโอขึ้นมาบน Foobox

วิธีการใช้งานและตัวอย่างอื่นๆ สามารถดูได้จาก http://foobox.fooshowcase.com/ และ  http://docs.fooplugins.com/foobox/

สรุป 

Foobox เป็นปลั๊กอิน Lightbox พรีเมี่ยมอีกตัวที่ใช้งานได้ดีมาก โดยเฉพาะฟังชั่นเสริมเกี่ยวกับ animation และ social network และยังสามารถใช้ touch screen เลื่อนภาพได้สะดวกเมื่อเปิดดู gallery บนมือถือหรือแท็บเล็ตได้สะดวกอีกด้วย

ปลั๊กอิน Foobox แบบฟรีให้เราลองใช้ด้วย โดยก็จะไม่มีฟังชั่นหลายๆ อย่างแบบเวอร์ชั่นเสียตังค์ ซึ่งจะเน้นแค่แสดงรูปภาพเพียงอย่างเดียว ดาวโหลดได้ที่ wordpress.org