Home / Developer  / Instagram API สร้าง Animation Banner บนเว็บจากภาพถ่าย Instagram

Instagram API สร้าง Animation Banner บนเว็บจากภาพถ่าย Instagram

Instagram API กับการสร้าง Responsive Animation

การใช้ jQuery plugin สร้างเว็บไซต์แบบ Responsive Web และมี Animation ในการเปลี่ยนรูปภาพโดยใช้ Instagram API เข้ามาช่วยในการพัฒนาร่วมเชิงประยุกต์ก่อนที่จะเริ่มต้นบทเรียนนี้แบบรวดเร็วนั้น ผู้เริ่มต้นและยังไม่เข้าใจอาจจะต้องไปอ่านข้อมูลก่อนหน้านี้ที่ บทความ “Instagram API เบื้องต้นกับการดึงรูปภาพมาแสดงโดยใช้ Tags อย่างง่าย” ก่อนนะครับเพื่อให้รู้ขั้นตอนวิธีการดึงภาพถ่ายจาก Instagram ออกมาก่อน หากว่าเข้าใจแล้วก็มาเริ่มต้นกันก่อนเลยครับ

Source Code นั้นผมขออนุญาติใช้ตัวอย่างจากงานของนักพัฒนาต่างประเทศอย่าง “” ครับเค้าพัฒนาไว้ง่าย และ Clear มากๆ

Instagram API กับการสร้าง Responsive Animation

Instagram API กับการสร้าง Responsive Animation

เริ่มต้นโดยการใช้คำสั่งในการดึงภาพถ่าย Instagram ออกมาโดยอาศัย Tags ครับ

แตกต่างเล็กน้อยคือ HTML ครับให้ลองเพิ่ม Structure รูปแบบนี้ลงไปครับ

ส่วน Plugin ของ jQuery นั้นให้ประกาศใช้แบบนี้ครับ

ให้ลองใส่ข้อมูลตามนี้ครับ

[3]

ส่วน Option ของตัว Plugin นั้น ประกอบไปด้วยคำสั่งเหล่านี้ครับ

คำสั่งในการสร้างแถว หรือ Rows
rows : 4,

คำสั่งในการเพิ่ม คอลัมน์ หรือ Columns
columns : 10,

คำสั่งในการวัดขนาดหน้าจอ แล้ว Rows และ Columns จะลดหลั่นไปตามขนาดความกว้าง และยาวของหน้าจอ
w1024 : {
rows : 3,
columns : 8
},

w768 : {
rows : 3,
columns : 7
},

w480 : {
rows : 3,
columns : 5
},

w320 : {
rows : 2,
columns : 4
},

w240 : {
rows : 2,
columns : 3
},

คำสั่งสำหรับควบคุมรูปแบบของ แอนิเมชัน
step : ‘random’,
maxStep : 3,

คำสั่งควบคุมการ Click ของผู้เข้าชม
preventClick : true,

รูปแบบต่างๆ ของแอนิเมชันให้เลือกใช้ได้ตามนี้
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType : ‘random’,

ความเร็วของการ Refresh หน้าจอเปลี่ยนรูปภาพ
animSpeed : 500,

คำสั่ง แอนิเมชันของการเปลี่ยนภาพ เช่นการจางหาย หรือ เลื่อนไปมา
animEasingOut : ‘linear’,
animEasingIn : ‘linear’,

คำสั่งในการจับเวลาถอยหลัง และ Boolean
interval : 3000,
slideshow : true,
onhover : false,
nochange : []

คราวนี้เราจะทำกา Integrate กันกับ Code ชุดเก่า แต่เราจะเล่น Limit ของจำนวนภาพมากขึ้น โดย Pass URL ตามนี้ครับ

https://api.instagram.com/v1/tags/Thailand/media/recent?client_id=[Client_Id]&count=40

นั่นคือขอจำนวนภาพที่จะปรากฏจาก Tags ของ “Thailand” ออกมา 40  ภาพครับ

ให้ใช้ Code PHP แบบเดิมตามนี้

ปรับแต่ง ส่วนของการวน Loop ของ Foreach ให้สวยงามครับ

จะได้ผลลัพธ์แบบนี้ครับ

Instagram API กับการสร้าง Responsive Animation

Instagram API กับการสร้าง Responsive Animation

ตัวอย่างสามารถดูได้ที่

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

 

หรือดาวน์โหลด Source code ที่

 http://code.google.com/p/daydev/downloads/detail?name=api_instagram.zip&can=2

 

หวังว่าจะสนุกกับการพัฒนาโปรแกรมร่วมกับ Instagram API กันนะครับ

บทความที่เกี่ยวข้อง
Instagram API เบื้องต้นกับการดึงรูปภาพมาแสดงโดยใช้ Tags อย่างง่าย

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

POST A COMMENT