ผู้เขียน หัวข้อ: Foobox Responsive Lightbox  (อ่าน 597 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
Foobox Responsive Lightbox
« เมื่อ: 29 พฤษภาคม 2016, 12:49:50 »
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%)



กำหนดรูปแบบของ FooboxLook & Feel เป็นแท็บที่ใช้กำหนดลักษณะที่เราต้องการให้ Lightbox ปรากฏ สามารถเลือกโทนสี ลูกศร และตัว Loading เป็นต้น



Navigation Buttons ใช้สำหรับกำหนดว่าจะแสดงปุ่ม Navigation (เลื่อนรูป) แบบไหน
AnimationOpening/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/
« แก้ไขครั้งสุดท้าย: 20 มกราคม 2017, 12:48:44 โดย smf »