Home / Developer  / Baraja กับ jQuery Plugin แสดงผลภาพถ่ายแบบ Cards พร้อมแอนิเมชันสวยๆ

Baraja กับ jQuery Plugin แสดงผลภาพถ่ายแบบ Cards พร้อมแอนิเมชันสวยๆ

พอมีเวลาไปหา jQuery Plugin ดีๆ มาใช้กับงานของตัวเอง ในอินเทอร์เน็ตแล้วไปเจอกับ เจ้า Plugin ที่ชื่อว่า “Baraja” เข้าดูแล้วน่ารักดีเลยเอาแนะนำให้เอาไปใช้ทำแกลอรี่กันครับที่มาของเจ้า jQuery Plugin ตัวนี้นั้นสามารถเข้าไปดาวน์โหลดหรือศึกษาได้ที่ https://github.com/codrops/Baraja เลยซึ่งทีมพัฒนานั้นให้เราเอาไปใช้ได้ฟรี ไม่ต้องเสียค่าใช้จ่ายใดๆ แต่ต้องอยู่ใน License ของ MIT License นะครับ

Baraja กับ jQuery Plugin แสดงผลภาพถ่ายแบบ Cards พร้อมแอนิเมชันสวยๆ

Baraja กับ jQuery Plugin แสดงผลภาพถ่ายแบบ Cards พร้อมแอนิเมชันสวยๆ

รูปแบบการแสดงผลนั้นเป็นแบบน่ารักที่จับภาพของเรา และคำอธิบายใต้ภาพแสดงผลออกมาเป็นการ์ด น่าสนใจ พาลนึกได้ว่าถ้าเอามาพัฒนาร่วมกับ Instagram API น่าจะได้เว็บแกลอรี่สวยๆ แบบการ์ดโพลาลอยด์ ขยับไปมาน่าสนใจไม่น้อย
สำหรับการใช้งานนั้น ให้ไปดาวน์โหลดที่

https://github.com/codrops/Baraja

ครับ เราจะได้ไฟล์มาดังนี้

ไฟล์ทั้งหมดของ Baraja jQuery Plugin

ไฟล์ทั้งหมดของ Baraja jQuery Plugin

ซึ่งคำสั่งในการ Tansform หรือขยับแอนิเมชันนั้นใช้ CSS เป็นหลัก ดังนั้นต้องดูที่ Browser ด้วยครับว่า Browser ไหนลองรับด้วย (แน่นอนว่า IE อาจจะต้องลุ้นเล็กน้อย)
วิธีใช้งาน Plugin ครับ เจ้า Baraja จะมี Class ให้เรียกใช้อยู่แล้วชื่อว่า “baraja-container” วิธีเรียกใช้ก็แค่แทรกใน HTML ไปเลยตามตัวอย่าง

ซึ่ง Class น้ั้นจะถูกเรียกผ่าน Plugin ดังนี้

เป็นคำสั่งในการ Trigger ให้ Div ดังกล่าวทำงาน อัตโนมัติผ่าน Option ที่เป็นตัวแปรที่ Baraja แนบมาให้

ตัวอย่างที่ผมได้ลอง ดาวน์โหลดมาเล่นดู จะเป็นตามนี้ครับ

http://www.daydev.com/demo/Baraja/

ซึ่ง Option อื่นๆที่ Baraja นั้นมีให้เลือกการแสดงผล ก็มีให้เลือกเพิ่มเติมคือ

โดยตัวแปรในการ control นั้นก็ประกอบไปด้วย

ซึ่งค่าตั้งต้น แต่แรกที่ใช้งานนั้นจะเป็นแบบนี้มาก่อน

เราสามารถปรับแต่งได้จาก Option ข้างต้นที่ว่าไว้ครับ

แนะนำว่าคนทำเว็บคนไหนที่ต้องการหน้าแสดงผล ภาพถ่ายสวยๆ ในรูปแบบการ์ดน่ารักๆ ก็ลองดาวน์โหลดไปใช้กันดูครับ

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

POST A COMMENT