Shadowbox.js แสดง รูปภาพ,ข้อความ บนพื้นหลังดำ

ผมไม่แน่ใจเหมือนกันว่าภาษาไทยเรียกเทคนิคของการแสดงรูปภาพ หรือ ไฟล์มีเดีย ที่เด่นออกมาบนพื้นหลังที่มืด หรือสีดำว่าอะไร แต่ด้วยที่ผมได้ยินคับคล้ายคับคลา เหมือนฝรั่งเค้าจะเรียกเทคนิคหรืออาจจะเป็นชื่อโปรแกรมเฉยๆ ที่ว่าเรียกว่า shadowbox หรืออะไรก็ตามแต่

ShadowBox ในแบบของ facebook (ภาพด้านล่าง)

ด้วยความสนใจและสงสัยผมก็ลองไปรื้อๆค้นๆ เทคนิคนี้ดู ผมไปเจอ library ของ Javascript ตัวหนี่งที่ชื่อว่า Shadowbox.js ซึ่งเป็น lib ที่ช่วยอำนวยความสะดวกของการทำเทคนิคนี้ และมีความ highly customizable ตามที่เว็บเค้าบอก

Shadowbox เขียนขึ้นมาด้วย Javascript และ CSS การนำมาใช้งานก็ไม่ยุ่งยากอะไรมากมาย

เริ่มต้นที่การไปดาวน์โหลด มาจากเว็บไซต์ผู้พัฒนา http://www.shadowbox-js.com/download.html ในขั้นตอนของการดาวน์โหลดจะมี ตัวเลือกว่าจะให้ Shadowbox รองรับการแสดงไฟล์มีเดียในรูปแบบไหนบ้าง เช่น Image,Html,SWF ฯ แนะนำให้คลิกเลือกหมดเลยก็ได้ครับ เพื่อความสะดวกและความพร้อมของการเลือกใช้งาน

หลังจากดาวน์โหลดมาแล้ว ก็มาเก็บไว้ใน Directory พร้อมที่จะ import เพื่อนำเข้ามาใช้ในเว็บของเรา

ขึ้นตอนต่อไปหลังจากเก็บไว้ใน Directory แล้วก็เริ่มนำเข้ามาใช้งาน โดยการเรียกไฟล์ Javascript และ ไฟล์ CSS ของ Shadowbox เข้ามาใช้งานตามรูปแบบข้างล่าง

<link rel="stylesheet" type="text/css" href="shadowbox.css"> 
<script type="text/javascript" src="shadowbox.js"></script> 
<script type="text/javascript"> Shadowbox.init(); </script>
และประกาศใช้ Shadowbox.init(); เริ่มต้นเพื่อให้ Shadowbox เริ่มทำงาน ซึ่งในครั้งนี้จะขอยกตัวอย่างการนำ Shadowbox ไปใช้งานเพื่อแสดงรูปภาพในเว็บไซต์ การแสดงรูปภาพโดยเทคนิคนี้ก็ไม่ได้ยากลำบากอะไรมากนัก ก็เพียงแค่ประกาศ <a> เพื่อลิงก์ไปยังรูปภาพ แต่เพิ่ม rel="shadowbox" เข้าไปใน <a> ด้วย
<a href="myPicture.jpg" rel="shadowbox">My Picture</a>
เพียงเท่านี้รูปภาพชองเราก็จะถูกแสดงในรูปแบบของ Shadowbox แล้ว

มีคลิปของฝรั่งเค้าทำไว้ เกี่ยวกับ Basic การใช้ Shadoxbox ใน Youtube ลองศึกษาเพิ่มเติมได้ จากคลิปด้านล่างนี้

ศึกษาเพิ่มเติมเกี่ยวกับ Shadowbox ได้ที่ http://www.shadowbox-js.com/usage.html


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s