มีพี่เข้ามาสอบถามเกี่ยวกับอัลบั้มภาพกิจกรรม แบบที่โรงพยาบาลอ่างทอง (ที่ทำงานผม) ใช้อยู่ ว่าเป็น module อะไร? ทำยังไง? เห็นมันสวยดีเลยอยากให้แนะนำ ผมเลยชี้แจงรายละเอียดคร่าวๆ ดังนี้ครับ
code แยกออกเป็นสองส่วนดังนี้ครับ
- PHP – ใช้ดึงข้อมูลจาก facebook album มาแสดง
- CSS – จัดรูปแบบให้น่าสนใจ
0 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 31 32 33 34 35 36 37 38 39 40 41 | <ul class="container-fluid grid cs-style-4"> <?php /** * [$url เปลี่ยนเฉพาะตัวเลข เป็นเลข id บน facebook ของ user หรือ page ที่ต้องการนำอัลบั้มมาแสดงผล] * [$obj ดังข้อมูลมาจาก graphAPI ของ facebook รูปแบบข้อมูลจะเป็น JSON] * [$ng ตัวแปรนับจำนวนอัลบั้ม เริ่มต้นจาก 0] * [$limit กำหนดให้แสดงกี่อัลบั้ม] */ $url = "https://graph.facebook.com/208646139152581/albums"; $obj = json_decode(file_get_contents($url)); $ng = 0; $limit = 12; foreach($obj->data as $item) { if ($item->type == 'normal' && $item->name != 'Cover Photos' && $ng <= $limit) echo ' <li class="col-xs-6 col-sm-4"> <figure> <div><img src="https://graph.facebook.com/'.$item->cover_photo.'/picture"></div> <figcaption> <h5>'.$item->name.'</h5> <a href="'.fix_album_link($item->link).'" rel="external">ดูอัลบั้มเต็ม</a> </figcaption> </figure> </li>'; $ng++; } /** * [fix_album_link เพิ่มเข้ามาเพื่อแก้ link ของ อัลบั้มบน facebook ที่มันแก้ไขใหม่ ซึ่งไม่ตรงกับ graphc API ที่มันให้บริการอยู่ อนาคตอาจมีการเปลี่ยนแปลงอีก] * @param [type] $link [ url ของอัลบั้มจาก graphAPI] * @return [type] [url ที่แก้ link แล้ว] */ function fix_album_link($link) { $url_parsed = parse_url($link); parse_str($url_parsed['query'], $fix); return '//www.facebook.com/media/set/?set=a.'.$fix['fbid'].'.'.$fix['aid'].'.'.$fix['id'].'&type=3';; } ?> </ul> |
ในส่วนของ CSS นั้นผมใช้ service ของ tympanus codrops
http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
สามารถ download code ตัวอย่างทั้งหมดได้ที่นี่ครับ
https://github.com/MoreMeng/FBgallery