96 lines
2.4 KiB
HTML
96 lines
2.4 KiB
HTML
<!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" />
|
|
|
|
<!--
|
|
jQuery library
|
|
-->
|
|
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
|
|
|
|
<!--
|
|
jCarousel library
|
|
-->
|
|
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
|
|
|
|
<!--
|
|
jCarousel skin stylesheet
|
|
-->
|
|
<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="75" height="75" 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>
|