Sometime back I had done a landing web page for some of the internal projects at my company. The page was supposed to be pure Html with Css and Javascript. jQuery was an obvious choice for me as I had already used it successfully in my earlier projects.
We decided to show the projects in a carousel view, something like so:
The Carousel plugin
In the spirit of jQuery, I made the carousel component as a plugin. For some of the animations and positioning aspects of the carousel, I used the dimensions and ui plugins.
You can hover over each item to see a tooltip for the project. The tooltips are shown using the clueTip plugin.
Download files
You can download the 
zip containing the demo files along with the complete source for the carousel plugin.
[Note that the version of jQuery I am using may be older.]
[Update] You can now see a live demo
Hope you find it useful 
[...] Podila presents his Carousel component in jQuery Craig Shoemaker Using jQuery to Call ASP.NET AJAX Page Methods Jonathan Snook presents Using [...]
Why no live demo…grrrrrrrrr
Now you have it ….
wholly crap awesome!!!
How can i get the link (item.url) opened in a new window?
I’m trying to figure out how to change the items and descriptions. This the page I have it at, and I want to have each image be a different year on the history of the company…i,e. in 1985 “this happened” and in 1987 “this happened”. Any help would be great!
Shelly,
If you open up the index.html file inside the ZIP, you will find the code to create the items. I use a for-loop to generate the items for the example.
Forgot to list the site.
http://www.coolchickdesigns.com/shiner/history.html
Thanks Pavan. Unfortunately, I’m not too versed in javascript and have tried a couple of things to no avail. When I duplicate the code below:
$(document).ready(function()
{
var items = new Array();
for (var i = 1; i <= 12; i++)
{
var item = new Object();
item.title = “Project – ” + i;
item.description = “This will some long winding description for the project: Project ” + i + “, mostly some marketing stuff”;
item.url = “http://blog.pixelingene.com”;
item.image = “items/” + ((i < 10) ? “0″ : “”) + i + “.png”;
items.push(item);
}
var ref = $(“#carousel”).carousel({items:items, itemSize: 128});
});
it just makes the change to all of them. Is there any way you could give me some sample code for each item to be different text…i.e. “1985″ as the title of the first one with the description being “this is what the company was doing in 1985″ and “1992″ with “this is what the company was doing in 1992″ for the second one, etc.
http://www.coolchickdesigns.com/shiner/NEW/history.html
Thanks in advance!
Shelly
I am looking to add a next/previous button to this so you can browse it in order. I can’t seem to get it working. I am new to jquery and the ui, can you help?
Can this plugin rotate images like this
http://www.andrewsellick.com/examples/3d-carousel/ ?
thanks
Awesome!!! That’s something I’ve been looking for