ไม่รู้จะตั้งหัวข้ออย่างไร ก็เลยตั้งเป็นไทยคำ อังกฤษคำ เสียเลย Popup Image ไปถามลุงกูแล้ว ลุงกู(google)... แกบอกว่าแปลว่า ภาพป๊อปอัพ นั่นเอง บทความนี้เป็นวิธีการทำภาพป๊อปอัพ ด้วยการดึงข้อมูลรูปภาพออกมาจากฐานข้อมูล มาแสดงแบบง่ายๆ ที่เขาเรียกว่า Simple ๆ อะไรนี่แหละ แต่ก็น่าสนใจไม่น้อย ที่ท่านสามารถนำไปพัฒนาต่อได้....
เริ่ม...
บทนี้มีไฟล์ 3 ไฟล์คือ
jquery.js
config.php
popimageonclick.php
สร้างฐานข้อมูลสำหรับทดสอบ SQL
CREATE TABLE `images` ( `id_image` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(255) NOT NULL DEFAULT '', PRIMARY KEY (`id_image`) );
ไฟล์ popimageonclick.php
นำเข้า jquery
<script type="text/javascript" src="jquery.js"></script>
ผมจะดึงข้อมูลรูปภาพขึ้นมาแสดงก่อนด้วยโค้ดนี้ จุดสำคัญท่านจะต้องแสดงภาพออกมาให้ได้ก่อน ที่จะไปเขียน
โค้ดเพิ่มเติมในส่วนอื่นๆ
<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$id_image = $row[id_image];
$image = $row[image];
$title = $row[title];
echo "<a href ='#' class='popup' relid='popimage' id='imageleft'/>";
echo "<img border='0' height='60' src='upload/$image' img ='$image'/>";
echo "</a>";
$i++;
}
?>
ตรงนี้มีข้อสังเกตุ 2 จุดคือ
relid='popimage' กับ img='$image'
กำหนดมาจากใหน ตอบ ไม่ได้กำหนดมาจากใหน แต่กำหนดขึ้นเองในกรณีที่เราไม่มีตัว select แบบ
Attribute Equals Selector เช่น id หรือ class เพื่อให้ jquery สามารถค้นหาข้อมูลผ่าน
Selector นี้ได้
จากนั้นผมก็สร้าง tag div ขึ้นมาเพื่อเอาไว้แสดงรูปตอนป๊อปอัพ ดังนี้
<div class="popbox" id="popimage"></div> <div id="popfade"></div>
แสร็จแล้วก็มากำหนด javascript ให้กับการคลิกเมาว์ เพื่อแสดงภาพป๊อปอัพ ดังนี้
<script type="text/javascript">
$(document).ready(function() {
$('a.popup').click(function() {
var image = $(this).find('img').attr("img");//ค้นหาtag img เก็บค่าจาก seletor img
var html = '<center><div id="borderimg">';
html +='<div id="showimage"><img src="upload/'+image+'"/>';
html +='</div></div></center>';
//กำหนดให้รูปไปแสดงที่ id popimage
var showimage = document.getElementById('popimage').innerHTML= html;
//เก็บค่าจาก seletor relid
var popid = $(this).attr('relid');
$('#' + popid).fadeIn();
$('body').append('<div id="popfade"></div>');
$('#popfade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
//กำหนดให้รูปแสดงอยู่ตรงกลางจอภาพ
var poptop = ($('#' + popid).height() + 10) / 2;
var popleft = ($('#' + popid).width() + 10) / 2;
$('#' + popid).css({
'margin-top' : -poptop,
'margin-left' : -popleft
});
});
//กำหนดให้รูปหายไปตอนคลิกเมาว์บนพื้นที่ว่าง
$('#popfade').click(function() {
$('#popfade, #popimage').fadeOut()
return false;
});
});
</script>
จากนั้นก็มากำหนด CSS ดังนี้
.popbox {
width:auto;
height:auto;
background-repeat:no-repeat;
display: none;
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
#popfade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
#close img {
text-decoration:none;
}
#close {
width:50px;
height:50px;
position: absolute;
float:right;
}
#showimage{
padding:10px;
background: #dddddd;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
#borderimg{
border:6px solid #666666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#imageleft{
text-decoration:none;
margin-left:10px;
}
Code ที่แสร็จแล้ว
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popup image demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.popup').click(function() {
var image = $(this).find('img').attr("img");
var html = '<center><div id="borderimg">';
html +='<div id="showimage"><img src="upload/'+image+'"/>';
html +='</div></div></center>';
var showimage = document.getElementById('popimage').innerHTML= html;
var popid = $(this).attr('relid');
$('#' + popid).fadeIn();
$('body').append('<div id="popfade"></div>');
$('#popfade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var poptop = ($('#' + popid).height() + 10) / 2;
var popleft = ($('#' + popid).width() + 10) / 2;
$('#' + popid).css({
'margin-top' : -poptop,
'margin-left' : -popleft
});
});
$('#popfade').click(function() {
$('#popfade, #popimage').fadeOut()
return false;
});
});
</script>
<style type="text/css">
.popbox {
width:auto;
height:auto;
background-repeat:no-repeat;
display: none;
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
#popfade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
#close img {
text-decoration:none;
}
#close {
width:50px;
height:50px;
position: absolute;
float:right;
}
#showimage{
padding:10px;
background: #dddddd;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
#borderimg{
border:6px solid #666666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#imageleft{
text-decoration:none;
margin-left:10px;
}
</style>
</head>
<body>
<div class="popbox" id="popimage"></div>
<div id="popfade"></div>
<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$id_image = $row[id_image];
$image = $row[image];
$title = $row[title];
echo "<a href ='#' class='popup' relid='popimage' id='imageleft'/>";
echo "<img border='0' height='60' src='upload/$image' img ='$image'/>";
echo "</a>";
$i++;
}
?>
</body>
</html>
บทความนี้ก็จบลงเพียงเท่านี้ครับ.......
0 ความคิดเห็น:
แสดงความคิดเห็น