jQuery Fancybox

By -

การที่เราจะเล่น effect กับหน้าจอ ถ้าเป็น javascript ล้วนๆนี่ มันลำบากเลือดตาแทบกระเด็น เลยทีเดียว ดีที่ตอนนี้ ชีวิตผมฝากไว้ที่ jQuery อะไรๆมันก็เลยสบายขึ้นเยอะ เด่วจะหาว่าพูดมากเข้าเรื่องกันเลยดีกว่า
FancyBox คืออะไร
FancyBox เป็นเครื่องมือสำหรับการแสดงผลรูปภาพ , เนื้อหา html และสื่อหลายๆอย่าง เช่น วีดีโ ในสไตล์ Mac”Lightbox”ที่ลอยสูงตระหง่านอลังการงานสร้างอยู่บนหน้าเว็บไซต์ แบบโดดเด่น
มันถูกสร้างขึ้นโดยใช้Libary jQuery และที่สำคัญฟรีครับ
คุณสมบัติคร่าวๆ สามารถแสดงภาพ, องค์ประกอบ HTML, ภาพยนตร์ SWF, Iframes และนอกจากนี้ยังมีการ Ajax request ทั้งยังปรับแต่งผ่าน option และ css หากยังไม่เห็นภาพ สามารถเข้าไปดู demo และ Download  ได้ที่  http://fancybox.net/

ส่วนการใช้งานก็ง่ายแสนง่าย
ส่วนของ header

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
                         $(document).ready(function() {
 
			$("#example").fancybox(); // เรียกใช้ fancy box
 
                             });
 
</script>

ส่วนของ body

<div id="example">การที่เราจะเล่น effect กับหน้าจอ ถ้าเป็น javascript ล้วนๆนี่ มันลำบากเลือดตาแทบกระเด็น เลยทีเดียว ดีที่ตอนนี้ ชีวิตผมฝากไว้ที่ jQuery อะไรๆมันก็เลยสบายขึ้นเยอะ เด่วจะหาว่าพูดมากเข้าเรื่องกันเลยดีกว่า FancyBox คืออะไร FancyBox เป็นเครื่องมือสำหรับการแสดงผลรูปภาพ, เนื้อหา html และสื่อหลายๆอย่าง เช่น วีดีโ ในสไตล์ Mac"Lightbox"ที่ลอยสูงตระหง่านอลังการงานสร้างอยู่บนหน้าเว็บไซต์ แบบโดดเด่น มันถูกสร้างขึ้นโดยใช้Libary jQuery และที่สำคัญฟรีครับ คุณสมบัติคร่าวๆ สามารถแสดงภาพ, องค์ประกอบ HTML, ภาพยนตร์ SWF, Iframes และนอกจากนี้ยังมีการ Ajax request ทั้งยังปรับแต่งผ่าน option และ css</div>

โค้ดทั้งหมด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Fancybox</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
                  <script type="text/javascript">
                         $(document).ready(function() {
 
			$("#example").fancybox(); // เรียกใช้ fancy box
 
                             });
                  </script>
</head>
 
<body>
 
<div id="example" >
การที่เราจะเล่น effect กับหน้าจอ ถ้าเป็น javascript ล้วนๆนี่ มันลำบากเลือดตาแทบกระเด็น เลยทีเดียว ดีที่ตอนนี้ ชีวิตผมฝากไว้ที่ jQuery อะไรๆมันก็เลยสบายขึ้นเยอะ เด่วจะหาว่าพูดมากเข้าเรื่องกันเลยดีกว่า
FancyBox คืออะไร
FancyBox เป็นเครื่องมือสำหรับการแสดงผลรูปภาพ , เนื้อหา html และสื่อหลายๆอย่าง เช่น วีดีโ ในสไตล์ Mac"Lightbox"ที่ลอยสูงตระหง่านอลังการงานสร้างอยู่บนหน้าเว็บไซต์ แบบโดดเด่น
มันถูกสร้างขึ้นโดยใช้Libary jQuery และที่สำคัญฟรีครับ
คุณสมบัติคร่าวๆ สามารถแสดงภาพ, องค์ประกอบ HTML, ภาพยนตร์ SWF, Iframes และนอกจากนี้ยังมีการ Ajax request ทั้งยังปรับแต่งผ่าน option และ css หากยังไม่เห็นภาพ 
</div>
</body>
</html>
mitsumasa