jCarousel
The other day I talked about the cool JQuery widget Thickbox. Today I would like to give praise and thanks to the creator of jCarousel, a jQuery plug in for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
The same project that I was utilizing the Thickbox technique, also called for a little section on the home page that would have album covers that the user could scroll right or left and click on the album for more information, a lot like this done for another project in flash. In the middle of the page you will see the area where you can scroll left to right and click on an album. Well I didn’t create that and wasn’t exactly sure how to go about it. Since I already was utilizing the jQuery library, I figured I would see if there was anything out there that mimics this functionality.
I found it in the form of jCarousel written by Jan Sorgalla. I got it working perfectly using the AJAX method to pull in the files from a text file on my server and write the list items. It also uses the Thickbox technique when a user clicks on an image to show a larger version. I didn’t want this though, I wanted to be able to click on an album and open an HTML page with the image of the album, a list of tracks, and other details. This wan’t possible with the way that jCarousel was written out of the box but I knew it had to be possible since Thickbox allows you to do this. I looked on the site and blog on the topic but didn’t see any answers to this.
I noticed that Jan stated in one of his comments that there was a discussion board about it and he said to go over to the JQuery to find more support. I went there and signed up for the mailing list and somehow found this Nabble forum. I went there and posted my problem and in a matter of hours he replied and asked for a bit more detail and so I did and by this morning he posted the solution. I never even thought that this would get answered let alone get the working solution within a day, and for that I owe Jan tons of thanks for helping me out and letting me get past this problem and finish the site.
if anyone is curious about how to switch it to make it possible to load an html file instead of the image once clicked this is what you do.
In the example_dynamic_ajax.txt where the plugin grabs the files for the images with ajax the images are listed as so
http://example.com/blah.jpg;Flower1|
you switch that to be
http://example.com/blah.jpg;Flower1;http://example.com/path/to/file|
Then change the getItemHTML() function to:
function getItemHTML(data)
{
var split = data.split(";");
var url = jQuery.trim(split[0]);
var title = jQuery.trim(split[1]);
var file = jQuery.trim(split[2]);
return '<img src="' + url + '" width="' + 75 + '" height="' + 75 + '" alt="' + title + '" />';
};