facebook « แลกเปลี่ยนเรียนรู้:km tool
archive page

คำสำคัญ ‘facebook’

การใช้บริการ sharethis.com

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Thursday, February 2nd, 2012
แบ่งปัน เนื้อหา

แบ่งปัน เนื้อหา

sharethis คือ บริการอำนวยความสะดวกในการ share เนื้อหาจากหน้าเว็บเพจ
ส่งถึงหน้า social network ของเพื่อนโดยง่าย
1. สมัครสมาชิกกับ sharethis.com
2. เชื่อมบริการ social network เข้ากับ sharethis.com
3. เลือกใช้บริการเพิ่ม sharethis.com ใน website ของเรา
4. รับ code
<script type=”text/javascript”>var switchTo5x=true;</script>
<script type=”text/javascript” src=”http://w.sharethis.com/button/buttons.js”></script>
<script type=”text/javascript”>stLight.options({publisher: “f53e4e65-4d03-4886-8585-139c248fbbd1″}); </script>
และ
<span class=’st_sharethis_vcount’ displayText=’ShareThis’></span>
<span class=’st_facebook_vcount’ displayText=’Facebook’></span>
<span class=’st_twitter_vcount’ displayText=’Tweet’></span>
<span class=’st_linkedin_vcount’ displayText=’LinkedIn’></span>
<span class=’st_email_vcount’ displayText=’Email’></span>
5. ใส่เข้าไปในเว็บไซต์ของเรา
6. เพื่อนที่เข้ามาในเว็บไซต์สามารถ share content ไปใน social network ของพวกเขา
—
สำหรับ wordpress webmaster
1. เข้า admin, appearance, editor
2. เปิด header.php แล้ววาง script ก่อนปิด head tag
3. เปิด footer.php แล้ววาง span ก่อนเปิด div tag of footer

—

วันต่อมาผมก็แก้ไขใหม่
แก้ไข widget ของ twitter ให้เหลือเพียง rpp:3
และย้าย sharethis จาก footer.php ไปท้ายสุดของ comments.php

คำสำคัญ:, , , ,
บันทึกไว้ใน เทคโนโลยีรอบตัวเรา | ไม่มีความคิดเห็น »

การเพิ่ม profile widget ของ twitter

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Tuesday, January 31st, 2012
profile widget

profile widget

ข้อมูลมากมายไหลอยู่ในโลกเสมือนจริง กลุ่มคนที่ใช้ twitter ก็จะส่งเสียง tweet กันอยู่ตลอดเวลา เสียงที่ออกมาอยู่ในรูปข้อความ 140 ตัวอักษร ที่แนบลิงค์ได้ และเราสามารถนำเสียงนั้นไปแสดงในเว็บเพจได้ด้วยบริการที่เรียกว่า widget ซึ่งมีตัวเลือก 4 ตัวคือ profile widget, search widget, faves widget หรือ list widget หรือจะใช้ facebook application ก็ทำได้

เมื่อวันที่ 31 มกราคม 2555 ผมตัดสินใจผูก profile widget เข้ากับ blog  ที่ดูแลอยู่ เพื่อเข้าถึงกลุ่มคนอีกกลุ่มที่ติดอยู่ในโลกของ twitter เท่าที่สังเกต มีผู้คนไม่น้อยอยู่แต่ใน  twitter เพราะเขาไม่ได้ใช้ชีวิตกับการสืบค้นข้อมูล เพียงแค่ tweet ที่พลั่งพลูออกมา ก็หมดเวลาจะเหลียวซ้ายแลขวาแล้ว ถ้าจะพบพวกเขาก็ต้องเข้าไปในโลกของเขา

ดังคำว่า ไม่เข้าถ้ำเสือก็ไม่ได้ลูกเสือ แล้วนี่ก็ไม่ใช่เสือ แต่เป็น twitter

https://twitter.com/about/resources/widgets

โดยเพิ่ม profile widget เข้าไปใน wordpress ผ่าน Menu, Appearance, Widgets, Text ก็จะได้ผลเหมือนกล่อง twitter สีดำที่อยู่ทางขวาล่างของภาพ

—

<script charset=”utf-8″
src=”http://widgets.twimg.com/j/2/widget.js”></script>
<script>
new TWTR.Widget({
version: 2,
type: ‘profile’,
rpp: 9,
interval: 30000,
width: 200,
height: 300,
theme: {
shell: {
background: ‘#333333′,
color: ‘#ffffff’
},
tweets: {
background: ‘#000000′,
color: ‘#ffffff’,
links: ‘#4aed05′
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: ‘all’
}
}).render().setUser(‘thaiabc’).start();
</script>

—
Profile Widget
Display your most recent Twitter updates on any webpage.

Search Widget
Displays search results in real time! Ideal for live events, broadcastings, conferences, TV Shows, or even just keeping up with the news.

Faves Widget
Show off your favorite tweets! Also in real time, this widget will pull in the tweets you’ve starred as favorites. It’s great for moderation.

List Widget
Put your favorite tweeps into a list! Then show ‘em off in a widget. Also great for moderation.

คำสำคัญ:, , ,
บันทึกไว้ใน เทคโนโลยีรอบตัวเรา | ไม่มีความคิดเห็น »

การใช้เทคโนโลยีอย่างมีประสิทธิภาพ (itinlife325)

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Saturday, January 14th, 2012
facebook

facebook

14 มกราคม 2555 นึกถึงภาพยนตร์เรื่อง Sphere ที่มนุษย์ได้แก้วสารพัดนึกมา 1 ลูก แต่คนกลุ่มหนึ่งเป็นระดับหัวกะทิของโลกได้สัมผัสแก้วนี้แล้วพบว่าขาดความพร้อม หรือใช้ไม่ถูกวิธี จนเป็นภัยต่อตนเองและกลุ่ม ในบทสรุปของภาพยนตร์พบว่ากลุ่มที่เหลือรอดพร้อมใจกันทิ้งลูกแก้วนี้ออกไปนอกโลก เพราะมนุษย์ในปัจจุบันยังไม่พร้อมที่จะใช้แก้วสารพัดนึกอย่างมีประสิทธิภาพ แล้วทำให้นึกถึงเทคโนโลยีที่ถูกพัฒนาขึ้นมากมายในปัจจุบันว่ามีคุณอนันต์ และโทษมหันต์ ตัวอย่างของโทษเช่นอาวุธร้ายที่คิดค้นขึ้นเพื่อทำลายทั้งร่างกายและทรัพย์สิน อินเทอร์เน็ตที่ผู้คนมากมายหลงใช้ในทางที่ไม่เหมาะสมจนเสียการเรียน เสียคน เสียเงิน หรือเสียงาน
ประโยชน์ของเทคโนโลยีนั้นชัดเจน เพราะเราใช้งานอยู่ตลอดเวลา แต่ถ้าใช้อย่างไม่มีประสิทธิภาพอาจมีประเด็นให้พูดคุยกันหลากหลาย ตัวอย่างปัญหาของการใช้เทคโนโลยี อาทิ การใช้เครือข่ายสังคมในเวลางานจนทำให้ผลงานลดลง ผิดพลาด หรือละเลยการปฏิบัติหน้าที่ การติดเกมในรูปแบบใหม่ทำให้เยาวชนใช้เวลาว่างอย่างไม่เหมาะสมเป็นเหตุให้พ้นสภาพการศึกษา หรือผลการเรียนตกต่ำ การแสดงความคิดเห็นเชิงลบผ่านเครือข่ายสังคมอาจทำให้ตนเองหรือครอบครัวเสื่อมเสีย ซึ่งล้วนเป็นการกระทำที่รู้เท่าไม่ถึงการณ์

ปัญหาใหญ่ของการใช้เทคโนโลยีในการจัดการความรู้เกิดจากการมีอัตตาในตัวบุคคลที่ไม่นิยมแสดงความคิดเห็นให้ผู้อื่นได้นำไปใช้ประโยชน์ มีการพัฒนาเทคโนโลยีรองรับการจัดการความรู้ทั้งในกลุ่มคนทำงาน นักเรียน นักศึกษา นักวิจัย แต่การใช้งานก็ยังเป็นความนิยมในระดับบุคคลมากกว่ากลุ่มองค์กร และมักไม่พบการแลกเปลี่ยนเรียนรู้ผ่านสื่อสาธารณะที่จะนำไปใช้เป็นข้อสรุปประกอบการตัดสินใจขององค์กร พบว่าการแลกเปลี่ยนเรียนรู้ผ่านบล็อก (Blog) หรือเครือข่ายสังคมมีประสิทธิภาพน้อยกว่าการแลกเปลี่ยนในห้องประชุมที่มีสมาชิกไม่เกินสิบคน แม้เครือข่ายสังคมจะเป็นเทคโนโลยีที่รองรับจำนวนคนได้พร้อมกันจำนวนมาก กลับพบว่ามีน้อยครั้งที่จะเห็นการใช้ประโยชน์เพื่อหาข้อสรุปจากประเด็นกำหนด แต่ถ้ามีการรวมกลุ่ม กำหนดเป้าหมายตรงกันชัดเจน มีบทบาทหน้าที่ให้แต่ละคน ก็เชื่อได้ว่าจะเป็นการสื่อสารที่มีประสิทธิภาพอย่างแน่นอน

การใช้ facebook ทำให้เกรดตก

http://ac219pyu22553s1.blogspot.com/2010/11/facebook.html

งานวิจัยระบุว่า ขณะทำการบ้าน ถ้าเปิด facebook ทิ้งไว้เฉย ๆ จะส่งผลให้การเรียนตกต่ำกว่าเพื่อน ๆลง 20 เปอร์เซ็นต์ เทียบระหว่างเด็กที่ใช้ และ ไม่ใช้ ถ้าใช้เกรดเฉลี่ยอยู่ที่ 3.06 ถ้าไม่ใช้อยู่ที่ 3.82

ผลกระทบต่อการทำงาน พบว่า บริษัทที่อนุญาติให้พนักงานใช้ facebook.com ขณะทำงาน ผลผลิตของพนักงานลดลง 1.5 เปอร์เซนต์จากผลผลิตทั้งหมด และมีองค์กรอีกมากที่ไม่ทราบเรื่องนี้

เขาว่า facebook ทำให้การเรียนเสีย ผลงานตก แต่เจ้าตัวไม่รู้
ผมว่าปัญหาใหญ่คือ เจ้าตัวรู้ แต่ผู้ปกครองไม่รู้

คำสำคัญ:, , ,
บันทึกไว้ใน เทคโนโลยีรอบตัวเรา | ไม่มีความคิดเห็น »

หน้าตาใหม่ timeline facebook

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Friday, December 16th, 2011
facebook timeline

facebook timeline

16 ธ.ค.54 มีโอกาสเข้าไปใน profile ของเพื่อนที่ชื่อ Hut เป็น System Analyst ขององค์กร พบหน้าตาของ facebook profile ดูแปลกตาไปจากปกติ ที่ header พบคำว่า timeline เมื่อค้นดูจาก google ก็พบโฮมเพจ
http://www.facebook.com/about/timeline
ที่ footer ของหน้านี้พบปุ่ม Get Timeline เมื่อกดปุ่ม publish now ก็ได้รูปแบบที่แตกต่างไปจากปกติ มีลักษณะเป็น 2 columns และมีตัวเลือก feature ให้กำหนดว่า post ใดขยายได้ด้วย

ตัวเลือก Activity Log แสดงปีและเดือน ทำให้เลือกแสดงกิจกรรมรายเดือนได้

มีคำแนะนำเรื่อง ยกเลิก timeline ที่
http://blazomania.com/2011/09/23/how-to-disable-new-facebook-timeline-feature-tutorial/
แต่ผมมี app อื่นอีกหลายรายการ .. จากการลบ app ที่สงสัยว่าใช้
ก็ไม่สามารถยกเลิก timeline ได้ครับ

คำสำคัญ:, , , , ,
บันทึกไว้ใน พัฒนาเว็บไซต์และโปรแกรม | ไม่มีความคิดเห็น »

ถึงเวลาบล็อกเฟซบุ๊คดอทคอม (itinlife314)

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, October 30th, 2011
facebook age

facebook age

30 ต.ค.54 พบรายงานว่าจากการสำรวจคนทำงานกว่า 600 คนในต่างประเทศเมื่อปีค.ศ.2007 มีผู้ใช้จำนวนมากที่ถูกจำกัดการเข้าถึงเว็บไซต์เครือข่ายสังคม อาทิ เฟซบุ๊ค (Facebook.com) ไฮไฟซ์ (Hi5.com) หรือ ทวิทเตอร์ (Twitter.com) คิดเป็นร้อยละ 43 ของผู้ตอบแบบสำรวจที่ถูกบล็อก แล้วมีบริษัทบางแห่งจำต้องเปิดให้พนักงานเข้าถึงได้ เพราะเกรงการถูกต่อต้าน หรือพฤติกรรมแสดงความไม่พอใจที่รุนแรง เรื่องนี้เป็นข้อพิพาทระหว่างบริษัทกับผู้ใช้ ซึ่งต่างคนต่างก็มีเหตุผลทุกฝ่าย แต่กระแสค่านิยมจะโอนเอียงไปทางฝ่ายผู้ใช้เป็นผู้ชนะ

มีผู้คร่ำหวอดในวงการความปลอดภัย ให้ข้อมูลเพิ่มเติมว่า มีบริษัทมากมายจำกัดการเข้าถึงเว็บไซต์ลักษณะนี้ ซึ่งพนักงานอาจไม่ชอบ แต่เว็บไซต์เครือข่ายสังคมอาจเป็นแหล่งที่ทำให้องค์กรมีความเสี่ยงด้านความปลอดภัยถ้าใช้อย่างไม่ระวัง เว้นแต่ว่าพนักงานจะเข้าถึงเว็บไซต์ตามวัตถุประสงค์ของงาน มีบริษัทมากมายไม่เห็นเหตุผลที่พนักงานต้องเข้าถึงเว็บไซต์เหล่านี้ในเวลางาน นอกจากมีข้อเสียด้านความปลอดภัย และเสียเวลาในการทำงานแล้ว เว็บไซต์เครือข่ายสังคมก็ยังมีข้อดี คือ การเป็นเครื่องมือในการทำงานร่วมกันของพนักงาน

อีกรายงานหนึ่ง ที่สัมภาษณ์ผู้ดูแลงานด้านไอทีในอเมริการวมกว่า 1400 ตัวอย่าง เมื่อปีค.ศ.2009 พบว่า จำกัดการเข้าถึงเว็บไซต์เครือข่ายสังคมของพนักงานมีร้อยละ 54 อนุญาตให้ใช้ตามวัตถุประสงค์ขององค์กรมีร้อยละ 19  ไม่อนุญาตให้ใช้ในเรื่องส่วนตัวมีร้อยละ 16  และอนุญาตให้ใช้ได้เต็มที่ในเวลางานมีร้อยละ 10 แล้วพบผลข้างเคียงของการใช้เว็บไซต์เครือข่ายสังคมว่าผลผลิตจากงานลดลงกว่าร้อยละ 2 โดยพนักงานส่วนหนึ่งใช้งานเว็บไซต์เครือข่ายสังคมเฉพาะที่ทำงานเท่านั้น แม้ข้อมูลเหล่านี้จะมีรายงานมาอย่างต่อเนื่องในหลายปีที่ผ่านมา แต่พฤติกรรมการใช้งานเว็บไซต์เครือข่ายสังคมก็เพิ่มขึ้นอย่างต่อเนื่อง โดยผู้ประกอบการส่วนหนึ่งไม่ทราบ หรือไม่ตระหนักถึงผลข้างเคียงที่กระทบต่อผลผลิตขององค์กร

http://www.pcworld.com/article/136226/worried_companies_block_facebook.html

http://news.techworld.com/personal-tech/3203460/study-says-most-companies-block-facebook-and-twitter/

คำสำคัญ:, , ,
บันทึกไว้ใน สังคมวัฒนธรรม, เทคโนโลยีรอบตัวเรา | ไม่มีความคิดเห็น »

facebook app of developers

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Saturday, July 9th, 2011
canvas facebook

canvas facebook

9 ก.ค.54 ก้าวที่ 1 ในส่วนของ facebook app of developers สร้างได้เรียบร้อย .. เสียเวลาไปประมาณ 2 ชั่วโมงกว่าจะรู้ว่า linux server ของ godaddy.com ที่ผมใช้มีปัญหา แต่ตัวที่เป็น windows server ใช้งานได้ทันที .. ปัญหาคือ code หยุดทำงานตั้งแต่ require_once ‘../lib/src/facebook.php’;
การสร้าง facebook app
1. เริ่มจาก เข้าเว็บไซต์ https://www.facebook.com/developers/ กรอกข้อมูลให้เรียบร้อย
2. เมื่อสร้างเสร็จใน my app : your app มีคำว่า example code คลิ๊ก แล้วคัดลอกไว้
3. เข้า https://github.com/facebook/php-sdk/ แล้ว down & up เข้า server
4. ส่งห้อง facebook-php-sdk-afa1534 ในห้อง yourapp เห็นว่ายาว จึงเปลี่ยนเป็นห้อง lib
5. สร้างแฟ้ม index.php เรียกใช้ facebook.php โดยนำ code ข้อ 2 มาแทนส่วนหัว
6. ทดสอบ http://yourdomain.com/yourapp/index.php
7. ไปแก้ไข my app ใน https://www.facebook.com/developers/ ตาม url ของ server
8. ใน app profile พบคำว่า go to app

http://apps.facebook.com/th_comment/

http://www.facebook.com/apps/application.php?id=169861339715833

http://www.facebook.com/apps/directory.php

http://developers.facebook.com/docs/guides/canvas/

http://www.slideshare.net/cbetta/facebook-app-development-presentation

คำสำคัญ:, , , , ,
บันทึกไว้ใน พัฒนาเว็บไซต์และโปรแกรม | ไม่มีความคิดเห็น »

ผมถูกเพื่อน block ใน fb

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Wednesday, June 29th, 2011
block friend in fb

block friend in fb

29 มิ.ย.54 มีวันหนึ่งเพื่อนบ่นว่าไม่เห็นผมใน fb (สรุปว่าอยากเห็นแล้ว) ก็หารือกัน  แล้วพบว่า ทั้งผมและเพื่อนไม่อาจพบกันด้วยวิธีการ search หรือเข้าผ่าน url โดยตรงก็ไม่ได้ .. เมื่อตรวจในรายละเอียดพบว่า เพื่อนเขา block ผมไว้ เมื่อแก้ไขก็กลับมาปกติเหมือนเดิมครับ

วิธีแก้ไข : จากเมนูมุมบนขวาคลิ๊ก  บัญชีผู้ใช้, ตั้งค่าความเป็นส่วนตัว จะพบบรรทัดล่างสุด คลิ๊ก รายชื่อที่ถูกบล็อก, แก้ไขรายชื่อ เมื่อต้องการบล็อก (Block) หรือปลดบล็อกใครก็ทำตรงหัวข้อ “ผู้ใช้ที่ถูกบล็อก” ได้ครับ

คำสำคัญ:, ,
บันทึกไว้ใน เทคโนโลยีรอบตัวเรา | ไม่มีความคิดเห็น »

ภาพปกนิตยสารด้วยการซ้อนภาพ ภาษา PHP

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, June 19th, 2011
merge image by php

merge image by php

19 มิ.ย.54 อ.พจน์ เล่าให้ฟังว่า ท่านใช้บริการ magmypic.com ทำให้ได้ภาพปก magazine สวย ๆ เป็นแรงกระตุ้นสำคัญให้ผมสนใจเรื่องนี้

แล้วผมก็สนใจ เข้าไปทดสอบ และค้นข้อมูลเพิ่มเติม ผลการทดลองใช้อยู่ใน thaiall.com/actress/joom.htm จากนั้นก็ต่อยอดมาทดสอบเขียนโปรแกรมด้วยภาษา PHP ทำการ Merge ภาพ 2 ภาพ คือ กรอบรูป และภาพผู้หญิง ก็พบว่า ได้ผลเป็นไปในแทนเดียวกับ magmypic.com ส่วนการประยุกต์ต่อไปคือ การทำเป็น fb application ให้เพื่อน ๆ ได้ใช้บริการส่งรูปที่อยู่ใน fb เข้ามาในระบบ ซึ่งเคยเห็นบริการแบบนี้อยู่มากมาย ถ้าลองทำในแบบไทยไทย ก็น่าสนใจอยู่ไม่น้อย .. แต่คงต้องพักไว้ก่อน เพื่อน ๆ สนใจโค้ด php จะลองเอาไปทำก็ได้ครับ ปัญหาคือ ต้องทำภาพ mag01.gif ให้เป็นภาพโปร่งใส ของผมใช้โปรแกรม iview ช่วยจัดการส่วนนี้ .. มิเช่นนั้นผลการซ้อนภาพจะมีปัญหาครับ

<?
$user = ‘user.jpg’;
$frame = ‘mag01.gif’;
$dest = imagecreatefromgif($frame);
$src = imagecreatefromjpeg($user);
$src_new = imagecreatetruecolor(280, 350);
list($width, $height) = getimagesize($user);
imagecopyresized($src_new, $src, 0, 0, 0, 0 , 280, 350, $width,$height);
imagecopymerge( $src_new, $dest, 0, 0, 0, 0, 280, 350, 100);
header(‘Content-Type: image/jpeg’);
imagegif($src_new);
imagedestroy($dest);
imagedestroy($src);
imagedestroy($src_new);
?>

http://www.thaiall.com/mag/merge.php
http://www.facebook.com/media/set/?set=a.213477228691078.52727.100000864060918

คำสำคัญ:, , , , ,
บันทึกไว้ใน เทคโนโลยีรอบตัวเรา | ไม่มีความคิดเห็น »

fb comment แบบมีปัญหา

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, May 22nd, 2011
facebook comments

facebook comments

22 พ.ค.54 หลายเดือนก่อน ผมเคยใช้ comment ของ facebook.com ในเว็บ gallery ขององค์กร มาวันนี้พบเทคนิคคล้ายกัน แต่มีปัญหาในการเลือกแสดงผล .. ต่อไปคงต้องระวังการใช้ระบบ comment ของ facebook.com ที่จะนำไปใช้ในเว็บขององค์กรใดใด เพื่อรับข้อเสนอแนะ แล้วนำไปปรับปรุงแก้ไขตามเนื้อหานั้น
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:comments href=”http://www.facebook.com/xxxx”
num_posts=”5″ width=”792″>
</fb:comments>

จากการทดสอบ
กรณีที่ 1 ผมเข้า comment ในเว็บเพจหนึ่ง แล้วก็เห็นผลตามปกติ
กรณีที่ 2 มีเพื่อนเข้า comment ในเว็บเพจหนึ่ง ต่อจากผม ก็เห็นผลตามปกติ
กรณีที่ 3 เข้า fb ในฐานะเด็กผู้หญิง แต่ไม่เห็น comment ของเพื่อนในเว็บเพจเดิม
กรณีที่ 4 logout ออกจาก fb แล้วไม่เห็น comment ของใครเลย
สรุปว่า comment ที่มีใครก็ตามเข้าไปแสดงความเห็น จะไม่ถูกเห็น ถ้ายังไม่เป็นเพื่อนผู้แสดงความเห็น ซึ่งไม่ตรงกับวัตถุประสงค์ของระบบรับ comment โดยทั่วไป เพราะการแสดงความเห็นนั้นมีต่อเว็บเพจโดยตรง มิได้มีความสัมพันธ์ระหว่างเว็บเพจกับเพื่อน ที่ต้องใช้เป็นเงื่อนไขในการแสดง comment

แต่ปัญหานี้ ไม่พบใน fb_comments.htm แสดงว่าอยู่ที่เทคนิคการเรียกใช้ application ของ facebook.com ซึ่งสรุปว่าถ้าเรียกใช้ระบบ comment อย่างถูกต้องก็จะไม่พบปัญหาข้างต้น
http://www.thaiall.com/facebook/fb_comments.htm

คำสำคัญ:, , ,
บันทึกไว้ใน พัฒนาเว็บไซต์และโปรแกรม | ไม่มีความคิดเห็น »

การนำเสนอภาพด้วย lightbox ใน frame

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Saturday, March 19th, 2011
lightbox

lightbox

19 มี.ค.54 เนื่องจากเห็นตัวอย่างภาพที่นำเสนอใน  facebook.com ซึ่งใช้หลักการคล้ายกับ lightbox script แต่เดิมการนำเสนอภาพที่มีขนาดใหญ่ จะตกขอบของ windows screen แต่ใน facebook ไม่มีตกครับ ประกอบกับคิดจะรวมเอกสารส่วนบุคคลให้มองเห็นทั้งฉบับใน windows screen จึงต้องแก้ไข code ของ light box เพื่อให้การนำเสนอภาพกว้างไม่เกิน 800px และสูงไม่เกิน 500px ซึ่งแก้ไข 2 จุดคือ

จุดแรก แก้แฟ้ม lightbox.css
จาก #lightbox img{width:auto; height:auto;}
เป็น #lightbox img{max-width:800px; max-height:600px;}

จุดที่สอง แก้แฟ้ม lightbox.js
จาก
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);

เป็น
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
if (imgPreloader.height > 500 || imgPreloader.width > 800)    {
var sc = imgPreloader.height / 500;
if (imgPreloader.width > 800) { sc = imgPreloader.width / 800; }
this.resizeImageContainer((imgPreloader.width / sc), (imgPreloader.height / sc));
} else {
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}
}).bind(this);

แนะนำเว็บไซต์
+ http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
+ http://blog.lysender.com/2010/07/scale-image-lightbox-another-javascript-hack/
+ http://www.thaiall.com/blog/burin/2440/

คำสำคัญ:, , , ,
บันทึกไว้ใน พัฒนาเว็บไซต์และโปรแกรม | 2 ความคิดเห็น »

« Older Entries