ส่วนนี่คือไฟล์ dynamic_ajax_php.php ที่ใช้เขียนออกมานรูป xml คับ Code (PHP)
<? //dynamic_ajax_php.php ?>
<?
$myServer = "localhost";
$myUser = "MyUser";
$myPass = "MyPass";
$myDB = "myDB";
$conn = mysql_connect($myServer, $myUser, $myPass)or die("Couldn't connect to MySQL Server");
$selected = mysql_select_db($myDB, $conn)or die("Couldn't open database");
// Array indexes are 0-based, jCarousel positions are 1-based.
$first = max(0, intval($_GET['first']) - 1);
$last = max($first + 1, intval($_GET['last']) - 1);
$length = $last - $first + 1;
// ---
//$select = "SELECT * FROM ty_cons_locations where title_id='$result[title_id]'";
//$select = "SELECT * FROM ty_cons_locations where title_id='1'";
$select = "SELECT * FROM ty_cons_locations";
$rs = mysql_query($select);
$num = mysql_num_rows($rs);
$var = "";
$i=1;
while($row = mysql_fetch_array($rs)){
$var .= "../uploads/construction/thum_".$row['images']."".($i<$num ? "," : "")."";;
$i++;
}
$images = explode(',',$var);
//print_r($images);
$total = count($images);
$selected = array_slice($images, $first, $length);
// ---
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// Return total number of images so the callback
// can set the size of the carousel.
echo'<?xml version="1.0" encoding="utf-8"?>';
echo '<data>';
echo ' <total>' . $total . '</total>';
foreach ($selected as $img) {
echo ' <image>' . $img . '</image>';
}
echo '</data>';
?>
ตอนนี้มันก็ดึงข้อมูลรูป จาก backend ได้ตามปกติแล้วคับ ผมจะให้มันทำงานร่วมกับ backend นะคับ
ประมาณว่า Where ตาม title_id คับ ตามหน้า html คับ
ส่วนนี่เป็น html คับ 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" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'dynamic_ajax_php.php',
{
first: carousel.first,
last: carousel.last
},
function(xml) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
// Set the size of the carousel
carousel.size(parseInt(jQuery('total', xml).text()));
jQuery('image', xml).each(function(i) {
carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
});
};
/*Item html creation helper*/
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="140" height="80" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Uncomment the following option if you want items
// which are outside the visible range to be removed
// from the DOM.
// Useful for carousels with MANY items.
// itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via Ajax</h3>
<p>
The data is loaded dynamically from a simple text file which contains the image urls.
</p>
<div id="mycarousel" class="jcarousel-skin-ie7">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</div>
</body>
</html>
Load balance : Server 00
