jCarousel is a jQuery plugin 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).
jCarousel is a good solution for a scrolling gallery of thumbnail images, but it doesn't have a built-in feature to vertically center images of different size.
This how to is based on the special example of jCarousel working together with Thickbox 3.
This is the original code used to create the html of each item of the carousel:
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};
Let's modify it using the jQuery Image, a Javascript object :
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
var img = new Image();
$(img).attr('src', item.url).attr('title',item.title).attr('alt',item.title).css('border','0');
return $('<a href="' + url_m + '" title="' + item.title + '"></a>').append(img);
};
Now it is possible to add an onload function as explained in this article.
When the image is downloaded we can work with its width and height and align it vertically:
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
var img = new Image();
$(img).load(function () {
$(this).hide();
/* $(this).parent() is the <a> element,
$(this).parent().parent() is the carousel item container */
$(this).css('margin-top', ($(this).parent().parent().height()-$(this).height())/2);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', item.url).attr('title',item.title).attr('alt',item.title).css('border','0');
return $('<a href="' + url_m + '" title="' + item.title + '"></a>').append(img);
};
In the same way it is possible to modify the horizontal alignment of the image:
$(this).css('margin-left', ($(this).parent().parent().width()-$(this).width())/2);
It is also possible to change the height and width attribute of the Image object to fit images to the container. With some other tricks you could also create your personal loading animation.