การใช้ jQuery plugin สร้างเว็บไซต์แบบ Responsive Web และมี Animation ในการเปลี่ยนรูปภาพโดยใช้ Instagram API เข้ามาช่วยในการพัฒนาร่วมเชิงประยุกต์ก่อนที่จะเริ่มต้นบทเรียนนี้แบบรวดเร็วนั้น ผู้เริ่มต้นและยังไม่เข้าใจอาจจะต้องไปอ่านข้อมูลก่อนหน้านี้ที่ บทความ “Instagram API เบื้องต้นกับการดึงรูปภาพมาแสดงโดยใช้ Tags อย่างง่าย” ก่อนนะครับเพื่อให้รู้ขั้นตอนวิธีการดึงภาพถ่ายจาก Instagram ออกมาก่อน หากว่าเข้าใจแล้วก็มาเริ่มต้นกันก่อนเลยครับ
Source Code นั้นผมขออนุญาติใช้ตัวอย่างจากงานของนักพัฒนาต่างประเทศอย่าง “MARY LOU” ครับเค้าพัฒนาไว้ง่าย และ Clear มากๆ
เริ่มต้นโดยการใช้คำสั่งในการดึงภาพถ่าย Instagram ออกมาโดยอาศัย Tags ครับ
แตกต่างเล็กน้อยคือ HTML ครับให้ลองเพิ่ม Structure รูปแบบนี้ลงไปครับ
|
1 2 3 4 5 6 |
<div id="ri-grid" class="ri-grid ri-grid-size-3"> <img class="ri-loading-image" src="images/loading.gif"/> <ul> <li><a href="#"><img src="image_source"/></a></li> </ul> </div> |
ส่วน Plugin ของ jQuery นั้นให้ประกาศใช้แบบนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script type="text/javascript"> $(function() { $( '#ri-grid' ).gridrotator( { rows : 4, columns : 8, maxStep : 2, interval : 2000, w1024 : { rows : 5, columns : 6 }, w768 : { rows : 5, columns : 5 }, w480 : { rows : 6, columns : 4 }, w320 : { rows : 7, columns : 4 }, w240 : { rows : 7, columns : 3 }, } ); }); </script> |
ให้ลองใส่ข้อมูลตามนี้ครับ
[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 แบบเดิมตามนี้
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <?php $json=file_get_contents ('https://api.instagram.com/v1/tags/thailand/media/recent?client_id=CLIENT_ID&count=200'); $decode=json_decode($json, true); foreach ($decode['data'] as $data){ $thumbnail=$data['images']['low_resolution']['url']; ?> <li><a href="#"><img src="<?=$thumbnail;?>"/></a></li> <?php }?> </ul> |
ปรับแต่ง ส่วนของการวน Loop ของ Foreach ให้สวยงามครับ
จะได้ผลลัพธ์แบบนี้ครับ
ตัวอย่างสามารถดูได้ที่
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 อย่างง่าย
