tri_inn

tri_inn

  • NA
  • 1.2k
  • 235.3k

How to Customize jcarousel

Aug 10 2011 3:05 AM
i am using jcarousel to show images in my pages. i am using jquery also to fetch image path from server side and showing in the page.
i have few issues regarding jcarousel.
1) i could not figure out how to setup jcarousel as a result i could show more than 3 image on the page. suppose i need to show 10 images at a time. so please guide me what i need to change in my code.
2) i want to show some text which will appear at the bottom of the each image.
3) i need to change image background color.
for showing more than 3 images i setup like
 jQuery(document).ready(function () {
    jQuery('#mycarousel').jcarousel({ size:5,
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});
for showing text along with the image i code like
function mycarousel_getItemHTML(mother) {
    var item = "<div>";
    item += "<img src='" + mother.Image + "' width='75' height='75' />";
    item += "</div>";
    item += "<div>" + mother.Title + "</div>";
    return item;
};
the above code is my client side code but from the server side i send data like
[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<Product> GetItems(int pageIndex, int pageSize)
    {

        List<Product> oProduct = new List<Product>
        {
           new Product("../images/1.jpg", "Sample Data.1"),
           new Product("../images/2.jpg", "Sample Data.2"),
           new Product("../images/3.jpg", "Sample Data.3"),
           new Product("../images/4.jpg", "Sample Data.4"),
           new Product("../images/5.jpg", "Sample Data.5"),
           new Product("../images/6.jpg", "Sample Data.6"),
           new Product("../images/7.jpg", "Sample Data.7"),
           new Product("../images/8.jpg", "Sample Data.8"),
           new Product("../images/9.jpg", "Sample Data.9"),
           new Product("../images/10.jpg", "Sample Data.10"),
           new Product("../images/11.jpg", "Sample Data.11"),
           new Product("../images/12.jpg", "Sample Data.12"),
           new Product("../images/13.jpg", "Sample Data.13"),
           new Product("../images/14.jpg", "Sample Data.14"),

        };
        return oProduct.GetRange((pageIndex - 1) * pageSize, pageSize);

    }
so here i explained 3 issues regarding jcarousel.
so please guide me in details with code. thanks