index.php file
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 3,
visible: 12
});
});
</script>
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li>I love you haha.</li>
<li>I love you haha.</li>
<li>I love you haha.</li>
</ul>
---------------------------------------------------------------------------
From the above code, I use firebug to inspect the 3 <li>, each of them has the following properties :
<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" style="float: left; list-style: none outside none; height: 19px;" jcarouselindex="1">I love you haha.</li>
<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical" style="float: left; list-style: none outside none; height: 59px;" jcarouselindex="2">I love you haha.</li>
<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical" style="float: left; list-style: none outside none; height: 99px;" jcarouselindex="3">I love you haha.</li>
So we know that the functions inside jcarousel.min.js file is assign those class, style and jcarouselindex to the <li>.[
-----------------------------------------------------------------------------
Now I need to dynamic get <li> from a php file.
usermessage.php file
echo "<li>I love you. Haha.</li>";
echo "<li>I love you. Haha.</li>";
echo "<li>I love you. Haha.</li>";
------------------------------------------------------------------------------
Then I added the following codes onto previous index.php file :
<?php $username1"=zac1987"; ?>
<script type="text/javascript">
function goer() {
var str="<?php echo $username1; ?>";
if (str=="")
{
document.getElementById("mycarousel").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mycarousel").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","usermessage.php?username="+str,true);
xmlhttp.send();
}
goer();
</script>
When index.php is loaded, it will call javascript function goer() to get the 3 <li> from usermessage.php file.
------------------------------------------------------------------------------
Now I use firebug to inspect the 3 <li> again, then I realize the 3 <li> don't have class, style and jcarouselindex anymore. I guess it is because the function inside jcarousel.min.js file is execute first before the 3 <li> are finish sent from usermessage.php file. How to stop jcarousel funtion before 3 <li> is finish loaded? I saw there is an example of the way to stop jcarousel function but it is for xml data, I don't know how to convert it to php. I hope somebody can help me out about this. Below is the example of the way to stop jcarousel function but it is for xml data :
<script type="text/javascript">
function mycarousel_initCallback(carousel, state)
{
// Lock until all items are loaded. That prevents jCarousel from
// setup correctly and we have to do that in the ajax callback
// function with carousel.setup().
// We're doing that because we don't know the exact height of each
// items until they are added to the list.
carousel.lock();
jQuery.get(
'special_textscroller.php',
{
'feed': 'http://jquery.com/blog/feed/atom/'
},
function(xml) {
mycarousel_itemAddCallback(carousel, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, xml)
{
var $items = jQuery('item', xml);
$items.each(function(i) {
carousel.add(i + 1, mycarousel_getItemHTML(this));
});
carousel.size($items.size());
// Unlock and setup.
carousel.unlock();
carousel.setup();
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>';
};
/**
* Utility function for truncating a string without breaking words.
*/
function mycarousel_truncate(str, length, suffix) {
if (str.length <= length) {
return str;
}
if (suffix == undefined) {
suffix = '...';
}
return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
};
jQuery(document).ready(function() {
/**
* We show a simple loading indicator
* using the jQuery ajax events
*/
jQuery().ajaxStart(function() {
jQuery(".jcarousel-clip-vertical").addClass('loading');
});
jQuery().ajaxStop(function() {
jQuery(".jcarousel-clip-vertical").removeClass('loading');
});
jQuery('#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
});
</script>