|
 |
| |
ช่วยทีคับ คืนตอนนี้ผมทำให้รูปที่ดึงจากฐานข้อมูลมาแสดงได้แล้ว จะสร้างตารางในส่วนแสดงโชว์รูปภาพ |
| |
 |
|
|
 |
 |
|
คืนตอนนี้ผมทำให้รูปที่ดึงจากฐานข้อมูลมาแสดงได้แล้ว
แต่รูปเล็กกับรูปใหญ่มันติดกัน ผมอยากให้มันแยกกันโดยสร้างตาราง ประมาณ ตามรุปข้างล่างคับ โดยใส่ตารางคับ
Code (PHP)
<style type="text/css">
#SimpleGallery{
padding:5px;
margin:0px;
}
#SimpleGallery div{
float:left;
font:bold 12px Tahoma;
text-align:center;
width:500px;
height:500px;
padding:0px;
margin:0px;
}
#SimpleGallery ol{
float:left;
width:110px;
padding:0px;
margin:0px;
}
#SimpleGallery li{
width:50px;
height:50px;
padding:1px;
margin:0px;
float:left;
list-style:none;
}
#SimpleGallery li img{
border:0px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.simple.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#SimpleGallery').SimpleGallery({activeItem:0});
});
</script>
</head>
<body>
<?
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("thaisnake");
$strSQL1 = "SELECT * FROM product WHERE ProductID = '20' ";
$objQuery1 = mysql_query($strSQL1) or die ("Error Query [".$strSQL1."]");
$objResult1 = mysql_fetch_array($objQuery1);
?>
<?php echo $objResult1["ProductID"];?>
<div id="SimpleGallery">
<div><img /><span></span></div>
<ol>
<?
$strSQL = "SELECT * FROM product_image WHERE ProductID = '".$objResult1["ProductID"]."' ORDER BY ProductID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
echo"<table border=\"0\" cellspacing=\"1\" cellpadding=\"1\"><tr>";
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
echo "<td>";
?>
<li>
<a href="picture/<?=$objResult["image"];?>">
<img src="picture/<?=$objResult["image"];?>" width="50" height="50"></a>
</li>
</ol>
</div>
<?
echo"</td>";
if(($intRows)%4==0)
{
echo"</tr>";
}
else
{
echo "<td>";
}
}
echo"</tr></table>";
?>
Code (Java)
(function($){
$.fn.SimpleGallery = function(_config){
var _config = $.extend({
swapDuration: 3500,
fadeOutDuration: 200,
fadeInDuration: 500,
activeItem : 0
}, _config);
function _view($item){
var $SG = $('#SimpleGallery');
var itemCount = $SG.find('li').length;
var itemIndex = ($item.index() + 1);
/* if((itemIndex+1) != _config.activeItem && !(_config.activeItem == 0 && itemIndex == itemCount)){
_config.activeItem = itemIndex;
if(_config.activeItem == itemCount){
_config.activeItem = 0;
}*/
$SG.find('div')
.stop() // Stop current effect
.fadeTo(0, 1) // Reset image's opacity
.fadeOut(_config.fadeOutDuration, function(){ // Start image's fade in for hide old image item
$(this).find('img').attr('src',$item.find('a').attr('href')); // Set current image
$(this).find('span').text($item.find('a').attr('title')); // Set current description
$(this).fadeIn(_config.fadeInDuration); // Start image's fade out for show current image item
});
//}
}
function _play(){
_view($('#SimpleGallery').find('li').eq(_config.activeItem));
}
return this.each(function (){
_play();
//var _interval = setInterval(_play, _config.swapDuration);
$(this).find('li').hover(function(){
/* if(_interval){
clearInterval(_interval);
}
_interval = setInterval(_play, _config.swapDuration);*/
$('#SimpleGallery').find('div').show();
_view($(this))
}).find('a').click(function(){return false;});
});
}
})(jQuery);
Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery
|
ประวัติการแก้ไข
2014-11-15 14:09:01
|
 |
 |
 |
 |
| Date :
2014-11-15 14:08:12 |
By :
nung2553 |
View :
807 |
Reply :
15 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (PHP)
<?php
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("thaisnake");
$strSQL1 = "SELECT * FROM product WHERE ProductID = '20' ";
$objQuery1 = mysql_query($strSQL1) or die ("Error Query [".$strSQL1."]");
$objResult1 = mysql_fetch_array($objQuery1);
$main_pic=$objResult1["ProductID"];
////////////////////////////////////////////
$strSQL = "SELECT * FROM product_image WHERE ProductID = '".$objResult1["ProductID"]."' ORDER BY ProductID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
echo"<table border=\"0\" cellspacing=\"1\" cellpadding=\"1\"><tr>";
$intRows = 0; $sub_pic='';
while($objResult = mysql_fetch_array($objQuery)){
$intRows++;
$sub_pic .= <<<HTML
<li><a href="picture/$objResult[image]">
<img src="picture/$objResult[image]" width="50" height="50">
</a></li>
HTML;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#SimpleGallery{ padding:5px; margin:0px; }
#SimpleGallery div{
float:left; font:bold 12px Tahoma; text-align:center; width:500px; height:500px; padding:0px; margin:0px;
}
#SimpleGallery ul{ width:110px; padding:0px; margin:0px; }
#SimpleGallery li{ width:50px; height:50px; padding:1px; margin:0px; float:left; list-style:none; }
#SimpleGallery li img{ border:0px; }
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.simple.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#SimpleGallery').SimpleGallery({activeItem:0});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="SimpleGallery">
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><img src="<?=$main_pic?>" ></td></tr>
</table>
</td></tr>
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><ul><?=$sub_pic?><ul></td></tr>
</table>
</td></tr>
</table>
</body>
</html>
เวลาเขียน แยก ส่วนกันให้ชัดเจนจะได้ดูง่ายครับ
โค๊ดผมยังไม่ได้ใส่ css นะครับ ก็ใส่ตามต้องการเลยนะครับ
|
| |
|
|
| |
| Date :
2014-11-15 14:54:21 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
รูปใหญ่ไม่แสดงคับ
|
| |
|
|
| |
| Date :
2014-11-15 16:21:35 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองวิวซอร์ส มาดูครับ ว่า link ของ รูปใหญ่เป็นอย่างไร
และขนาด width ของ ul ทำให้กว้างขึ้น เพื่อรองรับ ขนาดของ image ให้แสดงบันทัดเดียวได้
|
| |
|
|
| |
| Date :
2014-11-15 17:11:59 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<body>
<table border="0" cellspacing="1" cellpadding="1"><tr><!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#SimpleGallery{ padding:5px; margin:0px; }
#SimpleGallery div{
float:left; font:bold 12px Tahoma; text-align:center; width:500px; height:500px; padding:0px; margin:0px;
}
#SimpleGallery ul{ width:110px; padding:0px; margin:0px; }
#SimpleGallery li{ width:50px; height:50px; padding:1px; margin:0px; float:left; list-style:none; }
#SimpleGallery li img{ border:0px; }
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.simple.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#SimpleGallery').SimpleGallery({activeItem:0});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="SimpleGallery">
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><img src="" ></td></tr>
</table>
</td></tr>
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><ul> <li><a href="picture/201411011126062_10524583_565528483557451_3495324223727547603_n.jpg"><img src="picture/201411011126062_10524583_565528483557451_3495324223727547603_n.jpg" width="50" height="50"></a></li>
<li><a href="picture/201411011126061_1901631_648296441901969_452950600_n.jpg"><img src="picture/201411011126061_1901631_648296441901969_452950600_n.jpg" width="50" height="50"></a></li>
<li><a href="picture/201411011126060_10547472_668794203211158_8484217644608935072_n.jpg"><img src="picture/201411011126060_10547472_668794203211158_8484217644608935072_n.jpg" width="50" height="50"></a></li>
<ul></td></tr>
</table>
</td></tr>
</table>
</body>
|
| |
|
|
| |
| Date :
2014-11-15 17:54:14 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
07.$objResult1 = mysql_fetch_array($objQuery1);
print_r($objResult1); exit; // แทรกเพื่อตรวจสอบ
|
| |
|
|
| |
| Date :
2014-11-15 18:15:59 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
รูปใหญ่โชว์แล้วคับเพิ่มที่อยุ่ของรุปไป
Code (PHP)
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><img src="picture/<?=$main_pic?>" ></td></tr>
</table>
แต่พอเอาเม้าไปวางที่รุปเล็กรุปใหญ่ไม่เปลี่ยนไปตามรูปที่เราเอาเม้าไปวางคับ
|
| |
|
|
| |
| Date :
2014-11-15 18:31:57 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (JavaScript)
//16.
$sub_pic .= <<<HTML
<li><a href="picture/$objResult[image]">
<img src="picture/$objResult[image]" width="50" height="50" class="img_data">
</a></li>
HTML;
//30.
<tr><td><img src="" id="show_pic" ></td></tr>
//40.
$(document).ready(function(){
$('.img_data').mouseenter(function(){ $('#show_pic').attr('src', $(this).attr('src)); });
});
|
ประวัติการแก้ไข
2014-11-15 18:50:32
| |
|
|
| |
| Date :
2014-11-15 18:49:32 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โค๊ดที่กำลังใช้อยู่คับ
Code (PHP)
<!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>Simple jQuery Hover Image Gallery Version 2.0 by PlaKriM</title>
<style type="text/css">
#SimpleGallery{
padding:5px;
margin:0px;
}
#SimpleGallery div{
float:left;
font:bold 12px Tahoma;
text-align:center;
width:500px;
height:500px;
padding:0px;
margin:0px;
}
#SimpleGallery ol{
float:left;
width:110px;
padding:0px;
margin:0px;
}
#SimpleGallery li{
width:50px;
height:50px;
padding:1px;
margin:0px;
float:left;
list-style:none;
}
#SimpleGallery li img{
border:0px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.simple.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#SimpleGallery').SimpleGallery({activeItem:0});
});
</script>
</head>
<body>
<?
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("thaisnake");
?>
<?php
$strSQL1 = "SELECT * FROM product WHERE ProductID = '20' ";
$objQuery1 = mysql_query($strSQL1) or die ("Error Query [".$strSQL1."]");
$objResult1 = mysql_fetch_array($objQuery1);
$main_pic=$objResult1["Picture"];
////////////////////////////////////////////
$strSQL = "SELECT * FROM product_image WHERE ProductID = '".$objResult1["ProductID"]."' ORDER BY ProductID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
echo"<table border=\"0\" cellspacing=\"1\" cellpadding=\"1\"><tr>";
$intRows = 0; $sub_pic='';
while($objResult = mysql_fetch_array($objQuery)){
$intRows++;
echo "<td>";
$sub_pic .= <<<HTML
<li><a href="picture/$objResult[image]"><img src="picture/$objResult[image]" width="50" height="50" class="img_data"></a></li>
HTML;
}
?>
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#SimpleGallery{ padding:5px; margin:0px; }
#SimpleGallery div{
float:left; font:bold 12px Tahoma; text-align:center; width:500px; height:500px; padding:0px; margin:0px;
}
#SimpleGallery ul{ width:110px; padding:0px; margin:0px; }
#SimpleGallery li{ width:50px; height:50px; padding:1px; margin:0px; float:left; list-style:none; }
#SimpleGallery li img{ border:0px; }
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.simple.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.img_data').mouseenter(function(){ $('#show_pic').attr('src', $(this).attr('src)); });
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="SimpleGallery">
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><img src="picture/<?=$main_pic?>" id="show_pic" ></td></tr>
</table>
</td></tr>
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr><td><ul><?=$sub_pic?><ul></td></tr>
</table>
</td></tr>
</table>
</body>
</html>
แก้แล้วเป็นเหมือนเดิมคับ
|
| |
|
|
| |
| Date :
2014-11-15 19:11:15 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วคับ ขอบคุณคับ 
|
| |
|
|
| |
| Date :
2014-11-15 19:25:14 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณคับ
|
ประวัติการแก้ไข
2014-11-15 20:14:23
| |
|
|
| |
| Date :
2014-11-15 19:30:09 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลบ บันทัดที่ 1-56 ทิ้งครับ มันซ้ำซ้อน
099. $('.img_data').mouseenter(function(){ $('#show_pic').attr('src', $(this).attr('src)); });
แก้เป้น
099. $('.img_data').mouseover(function(){ $('#show_pic').attr('src', $(this).attr('src')); });
|
ประวัติการแก้ไข
2014-11-15 19:39:40
| |
|
|
| |
| Date :
2014-11-15 19:37:36 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าจะให้รุปเล็กเรียงแถวเดียวคับปรับตรงไหนคับ
|
| |
|
|
| |
| Date :
2014-11-15 20:14:35 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองขึ้นไปอ่านของเก่าดูครับ ผมแนะนะไว้แล้ว
|
| |
|
|
| |
| Date :
2014-11-16 09:05:31 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2014-11-16 10:38:07 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2014-11-16 15:20:26 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
