views:

764

answers:

1

Can anyone please help me how to implement vertical jCarousel by using ajax.

A: 

Answer to this question can be easily found on the first pages of jCarousel docs, but okay, I'll copy it here for you ;)

First of all download jCarousel and add all the sources to your <head> tag.

<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

Then in the place where you want your carousel put this code.

<ul id="mycarousel" class="jcarousel-skin-name">
   <!-- The content goes in here -->
</ul>

Then add js code to initialize your carousel.

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Carousel gonna be vertical
        vertical : true,
        // AJAX callback
        itemLoadCallback: itemLoadCallbackFunction
    });
});
</script>

Then you need to create itemLoadCallBackFunction to actually load new items into carousel dynamically. Basicly once you get some item with index i you just insert it to carousel with carousel.add(i, item).

UPD:

Here is an example with PHP script inside, you can get some inspiration from there.

freiksenet