<!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>
<title>ประยุกต์ใช้ Dialog ของ jQuery UI กับการซูมรูปภาพ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery-ui/css/start/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$.fn.MyDialog=function(){
var dialogName=$('#dialog');//ชื่อ Dialog ของเรา
$(this).click(function() {
dialogName.html('<img src="'+$(this).attr('href')+'" />');//แสดงรุปภาพในDialog
dialogName.dialog({//กำหนด Option ตามนี้
show: "fold",//Effect ตอนกดแสดงDialogขึ้นมา
hide: "explode",//Effect ตอนกดปิดDialog
width:"650",//ความกว้าง
title: $(this).attr('title'),//เชตTitleให้กับDialog
modal: true//Optionนี้อธิบายไม่ถูกหว่า มันเป็นพื้นหลังของDialog ลองเปลี่ยนค่าเป็นfalseดูครับ จะได้เห็นความแตกต่าง
});
return false;
});
}
$(document).ready(function(){//เมื่อเอกสารหน้านี้ถูกโหลดเรียบร้อยแล้ว
$('.imgZoom').MyDialog();//เรียกฟังก์ชั่นทำงาน $('ชื่อClassของรูปภาพ').Mydialog();
});
</script>
<style type="text/css">
img{
border:2px dashed #333;
text-decoration:none;
}
img:hover{
border:2px solid #F00;
}
</style>
</head>
<body>
<div id="dialog" style="display:none;"></div>
<div align="center">
<a href="photo/1.jpg" title="รูปที่ 1" class="imgZoom">
<img src="1s.jpg" width="144" height="138" /></a>
<a href="photo/2.jpg" title="รูปที่ 2" class="imgZoom">
<img src="2s.jpg" width="144" height="142" /></a>
<a href="photo/3.jpg" title="รูปที่ 3" class="imgZoom">
<img src="3s.jpg" width="144" height="143"/></a>
<a href="photo/4.jpg" title="รูปที่ 4" class="imgZoom">
<img src="4s.jpg" width="144" height="134" /></a>
<a href="photo/5.jpg" title="รูปที่ 5" class="imgZoom">
<img src="5s.jpg" width="144" height="132" /></a>
</div>
</html>
ขออธิบายนิดนึงนะ
Import ไฟล์ ไฟล์ Css ของ jQuery UI ,jQuery และ jQuery UI ตามลำดับ
<link rel="stylesheet" type="text/css" href="jquery-ui/css/start/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.18.custom.min.js"></script>
เราจะต้อง Import ไฟล์ jQuery เข้ามาก่อนไฟล์ jQuery UI นะครับ สำหรับวิธีดาวน์โหลดและติดตั้ง jQuery UI ให้อ่านได้จากบทความนี้เลยครับ -> ดาวนโหลดและติดตั้ง jQuery UI
การกำหนด Effect ให้กับ Dialog เราสามารถกำหนด Effect การแสดงผลได้ตามใจชอบเลยครับ เช่น
show: "fold" คือ Effect ตอนกดแสดงDialogขึ้นมา (ให้สังเกตุCodeบรรทัด 15)
hide: "explode" คือ Effect ตอนกดปิดDialog (ให้สังเกตุCodeบรรทัด 16)
เรื่องของ Effect ของ jQuery UI เพิ่มเติมได้จากที่นี้ -> http://jqueryui.com/demos/effect/
ส่วน Dialog ให้ศึกษาเพิ่มเติมได้จากที่นี้ครับ -> http://jqueryui.com/demos/dialog/
วันนี้ขอเขียนบทความง่ายๆสั้นๆหน่อยนะครับ ^^ หวังว่าท่านจะนำเนื้อหาในบทความนี้ ไปประยุกต์ใช้กับเว็บไซต์ของท่านได้นะครับ
ไม่มีความคิดเห็น :
แสดงความคิดเห็น