jQuery Infinite Carousel Plugin 1.2 Released

Update: The latest version of this plugin can be found here.

Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I’d seen this functionality in other carousels (none that run in infinite loops) where small images or some other user interface was displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image in the sequence? Little did i realize what I was in for.

Creating a user interface to allow jumping around the sequence of images was the easy part. Version 1.2 of the infinite Carousel creates thumbnail gallery with several options which allows you to click on a small box and jump to an image. The hard part turned out to be how to handle the actual jumping. I initially thought that I could fast forward the existing process, basically figuring out how far the carousel needed to be moved, and then just repeatedly moving one frame at a time. This didn’t even come close to making it into the final code as the effect was not even close to passable. It even felt like cheating. So I went back to the drawing board and started from scratch.

What I ended up with is a very fluid, very clean image carousel that allows you to jump to any image in the series, while maintaining all the functionality of the original Infinite Carousel. To make a long story, and many hours of coding short, the latest version of the Infinite Carousel manipulates the DOM based on how far away the desired image is. In a nutshell, list items and the images contained within (and optionally captions) are cloned, moved around, and deleted while the overall list is animated. Sounds easy. It’s not.

The final product is this:

While much of the original Infinite Carousel plugin code was used in the latest version, the guts of moving images around was retooled. In addition, new options have been introduced to allow control over the thumbnails that can now be displayed below the carousel.

I will keep version 1.0.1 of the infinite carousel available at its original location in case anyone would like to continue to use it, while making version 1.2 available below.

Update (8/31/2009):  I just changed the license for this plugin to the share alike license (http://creativecommons.org/licenses/by-sa/3.0/us/), updated the image paths, and fixed a problem with IE7 and errant commas. No other changes were made however the version number is now 1.2.2.

Download

Download jquery.infinitecarousel-1_2.zip. (version 1.2.2 – 8/31/2009)

What’s So Great About this Plugin?

  • Unlike most carousel plugins which stop when they get to the last image,
    this one allows the show to go on infinitely without any user intervention.
    If you have three images you want to display, after the third image has been
    displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.
  • Captions are optional.
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence.
  • Thumbnails can be styled via CSS.
  • It’s less than 14K (a minified/compressed version will be available shortly).
  • Reusable on multiple containers within the same page.
  • You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos below).

How to Use

First, all of the images that you want to display should be the same size and wrapped in a containing element (I recommend a div) which must have an ID.  Note that by using CSS, you can style the container (carousel) div to have left and/or right padding so that you can display a small amount of the previous and/or next images. The carousel must be a list where each list item is the image and optionally a paragraph containing the caption. See this example.

<div id="carousel">
<ul>
	<li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
	<li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
	<li><img alt="" src="p3.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="p5.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>

</ul>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. Also, all images should be the same size.  If you want to have a caption with an image, it *MUST* exist in a paragraph after the image.

To use the plugin you’ll need to have a copy of  jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel();
});
</script>

Finally, make sure that your CSS contains a rule for the width of the list within your container so that it’s set to a minimum of the combined widths of all your images. For example. #carousel ul {width:3000px}. In version 1.2 of the Infinite Carousel this isn’t necessary, however for anyone with JavaScript disabled, declaring the width in your style sheet can give them a simulated (albeit limited) carousel experience. At a minimum, the following CSS should be included in any page where the carousel exists (remember to change the width):

#carousel ul {
	list-style: none;
	width:1600px;
	margin: 0;
	padding: 0;
	position:relative;
}
#carousel li {
	display:inline;
	float:left;
}

Be sure to check out the demos below.

That’s it! You can apply the infinite carousel to any number of elements on a page.

Options

The following options are configurable:

  • transitionSpeed – the time (in milliseconds) it will take to transition between two images (default 1500)
  • displayTime – the time (in milliseconds) to display each image (default: 6000)
  • textholderHeight – the height of the caption. This is a fraction of the height of the images. (default: .2)
  • displayProgressBar – Boolean. Whether or not to display the progress bar (default: 1)
  • displayThumbnails – Boolean. Whether or not to display the thumbnails for the carousel. (default:  1)
  • displayThumbnailNumbers – Boolean. Whether or not to automatically place numbers in the thumbnail boxes. (default: 1)
  • displayThumbnailBackground – Boolean. Whether or not to use the corresponding image as the background for a thumbnail box. (default: 1)
  • thumbnailWidth – the width of each thumbnail box. (default: ’20px’)
  • thumbnailHeight – the height of each thumbnail box. (default: ’20px’)\
  • thumbnailFontSize – the font size of the number within the thumbnail box. (default: .7em)

Options are added when calling the script:

$('#carousel').infiniteCarousel({
	transitionSpeed : 2000,
	displayTime : 10000,
	textholderHeight : .25,
	displayProgressBar : 0
});

Note that the CSS of the thumbnail div created by the plugin can be controlled by using a rule like #carousel + div {your CSS here}. The plus between the carousel id and the div specifically targets the thumbnail container.

Enjoy!

Demos

  • Example 1
  • Example 2 (uses padding to hint at the previous and next images and larger thumbnails with no background images. The thumbnail container is also centered with CSS)

Note that the plugin uses several images which are kept in an images folder in the zip file (/js/infiniteCarousel/images/ by default). If you store the plugin in another folder on your server, update the path to these images.

Graceful Degradation

While almost everyone has JavaScript enabled in their browser you can use CSS to allow the plugin to degrade gracefully for those that don’t.

  • Setting the width, height, and overlflow on the container creates a view port to give those w/o JavaScript an approximation of what they’d see with JavaScript.
  • Setting a width of 9999px (or some large number equal to or greater than the combined width of all images) on the container, combined with setting the list to display inline and float left allows the list to display horizontally (leaving the width out would make the list scroll vertically)
  • Setting a height on the container equal to the height of the images plus some extra allows the captions to display

178 thoughts on “jQuery Infinite Carousel Plugin 1.2 Released”

  1. First, I have no problem runing the demo in both IE8 and Firefox. When I changed the images (in jpg format), IE8 doesn’t display the images but Firefox does. Any suggestions?

  2. Thank’s for doing all the work on this app! There are a few issues you should know about, and I also have a few recommendations.

    There is a clipping issue on the bottom of the images. For a photo gallery this usually isn’t noticable, it’s only 2-3 pixels. I have a curved border on each of my pictures which is slightly cut off, and looks bad. Can you isolate this, otherwise I’ll have to edit all my images to include some extra white space on the bottom. You can see this in my portfolio: http://www.psiblue.com/our-portfolio/

    The images you used for the forward, back, play and pause do not appear on white backgrounds. I understand your trying to make it light, but a 5k worth of images for controls would improve compatibility with a greater variety of images. The play & pause in the top right doesn’t seem intuitive, it would make more sense in the bottom next to the thumbnails.

    The left and right arrows are very small, and require a precise click to activate. It would be better if they were block div’s representing 15% of the image, so you wouldn’t have to click exactly on the button, but could click anywhere in that left or right 15%.

    Those are my recommendations! Thanks for the great little jqa!
    Send me an email, I’d love to hear from you.

  3. A W E S O M E !
    I just got tired of dealing with jcarousel at sorgalla.com and yours is tottally functional and easy to apply. It took more to uninstall the old one than having the new one done.
    I checked the .js and saw the css code integrated in every piece of the elements. Is there a way to have the inline css in a style sheet of my own?
    I haven’t tested in IE yet, but i feel confident about it.

    thanks for the code,
    Carlos

  4. hey. is it possible to use some sort of lightbox/shadowbox plugin with this? and if so, how do you do it? im a total newbie to all this jquery stuff..

    thanks,

    -paul

  5. Hello,

    The path to the images is hardcoded to /js in the script. I had to remove the / in order to get it to work in other folders then / on a webpage. A config option would be nice here.

    regards Bjarte

  6. hey. love the plug. im new to jquery so please forgive the newbie question..

    im trying to figure out how to make the .textholder’s height change depending on the length of the caption. right now, my captions vary dramatically and all that white space doesnt look good – the textholder is almost half the size of the image and i only have 1 line of caption.. i dont really want it to be half the size, i just want the textholder to adjust depending on the caption’s length.

    thank you,

    -paul

    1. @Paul
      The caption height is an option in the plugin and is a percentage of the height of the image container. You can style your text with CSS in addition to changing the caption block size.

      1. hey, thanks. i couldn’t figure it out.. i do have a major issue now. i need to find a way where i can have the thumbs be independent from the main slide/gallery.. the page i’m working on has the main gallery as is and right underneath there would be text (“see more work:”) and underneath that text the thumbs would live..

        how can i separate the thumbs from the main slider to accommodate that (i’m guessing) text div??? i am new to jquery/java, so i really dont know the whole lingo..
        also, for some reason, the thumbs aren’t cropping correctly, its only showing the top left corner of the image…

        i tried everything to make it happen, z-indexed it to be on top and set a top value for it, but it breaks and isn’t a practical solution

        you can take a look at what im trying to accomplish here: http://www.bbms.tv/freelance/mcondrick/ads/axe.htm

        thank you

      2. sorry to keep posting, but i might as well get it out now instead of later, if the above is not possible (making the thumbs independent from the main carousel slide), then is there a way so that i can make the thumbs on my own and have each thumb link remotely to the according slide on the main slider? same function that the thumbs do now, but ill place them in a different div outside the carousel.. ?

        thanks

    2. The thumbnails don’t resize or crop the images, they simply show a small bit of the larger image (or a background color if you don’t want to use the thumbnail). Resizing an image to fit the small thumbnail would make the image look horribly pixelated. Also, I’m not exactly sure if I follow you with the detaching the thumbnails from the carousel, but I think it should be possible. You’d need to alter the code so that clicking the thumbnails followed a link to the full size image, however if the full size image is different from the images in the carousel, then you’d need to pass the link as a parameter somewhere so that jQuery could read it and use it in the thumbnails. One goal for a future version of the carousel is to make it easy to integrate with a lightbox which might solve your problem.

      1. hey, thank you. im not quite getting what you recommended.. i guess ill keep playing with it. is there a way to NOT have the carousel autoplay on load? i was looking through the old comments and saw this post that said to add this line of code..
        $(‘#pause_btn’+randID).trigger(‘click’);
        now i did, but it still plays. i dont want to have any autoplay functionality at all.. any suggestions?

        thank you again

      1. OK I figured out how to fix this…

        around line 64 of jquery.infinitecarousel.js, the background color was defined here:

        $(‘#textholder’+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({‘backgroundColor’:’#FFF’,’opacity’:’0.5′});

        Just change the #FFF to whatever color you want.

        Thanks for making such a great content slider.

  7. Hi there. I just want to say thanks for all your work, and providing this plugin to the public. There are a lot of Javascript/AJAX photo viewers/sliders out there, but this one rises to the top of the pack. The only shortcoming is the fact that the script uses a cropped piece of the main picture to generate the associated thumbnail, instead of a ‘normal’ scaled version of the shot. This has led to several “WTF?” moments from people for whom I have used the script, where they couldn’t immediately see the correlation between the thumbnail and the original image. It was most recently a glaring example on a friend’s personal photography website, where he had a large series of landscape shots. Since all of the approximately 70 photos had some degree of sky at the top, all the thumbnails looked virtually identical and it made the whole gallery look very bizarre.
    I don’t know if you plan to address this in a coming update (or if you are even still updating this otherwise great script), but perhaps the author or someone else can point me in the right direction as far as where in the code I could focus a modification to have it produce proper scaled thumbnails of the whole image (ideally, incorporating user-adjustable resolutions, or even fixed-resolution thumbnails if variable res is too complicated). Can anyone give me a head start? It would be much appreciated. Thanks again!

    1. @Robert Sexton
      Thanks for the feedback Robert. This is something that I went back and forth on before adding the feature the way it is now. My main reason for making the thumbnails just a piece of the larger image was twofold. First, if I just changed the dimensions of the larger image to fit the thumbnail, the picture would look horribly pixelated and in my opinion pretty ugly. Second, since not every image is square like the thumbnails are, scaling the full size image down could either lead to an incorrect image ratio and result in an image looking squeezed or squashed. Don’t forget that you can turn the thumbnail backgrounds off entirely, but if that’s not an option it shouldn’t be difficult to change the script to downsize the images to fit into the thumbnail blocks.
      Another option would be to use PHP to properly generate scaled down thumbnails that look good in the correct ratio. This would of course add some processing time, but the outcome would be more appealing visually.
      By the way, to answer your question about updating the script, see the home page of the site and you’ll see that I just released version 2 of this plugin :)

      1. Thanks for your reply. Regarding your first reason:
        “…if I just changed the dimensions of the larger image to fit the thumbnail, the picture would look horribly pixelated and in my opinion pretty ugly.”
        I believe you’re being way too pessimistic here. While it depends to large degree on the scaling algorithm, you can get pretty good results down to some surprisingly small pixel sizes. The issue is not ‘pixelization’, as you said, so much as a loss of detail — but remember, we’re not looking to produce prints off the thumbnails, their main use is to act as placemarkers or visual cues, and even at as small as 16×16 there is usually enough information to help you find what you’re looking for in the gallery. Take a look at any decently designed website favicon and you will understand my point.
        As far as your second point, concerning the aspect ratios– I agree, this is slightly more complicated. The solution, however, can be as simple as not forcing the thumbnails to be square – just let them scale according to the original photo’s aspect ratio. Otherwise, with a little more coding, the script could first scale the photo down to a target pixel size based on length or width (and maintaining the correct ratio), THEN, crop that result to the nearest square to produce the final thumbnail. Either way, there would be minimal loss of information and, IMHO, there would be a lot more utility from the thumbs than from just a piece of the pictures’ upper left hand corner.
        I don’t have a lot of time these days to write my own routines, which is why your “drop-in” script has been great for me. But since I could really use this feature, I’d be willing to take a crack at incorporating it if you tell me where I should focus my attention, and whether I could do it by way of adjustment to your code or if I need to use some additional routines from the jQuery library.

  8. First of all, thank you for the time and energy you’ve put into this project. Although I’m fairly new to javascript, I do recognize this as a solid production

    I have however, been struggling with an issue in IE7 here:
    http://development.communityhopeschool.org/

    When hovering over the infinitecarousel thumbnails or letting them cycle on their own, the thumbnail list slips out from under the image, breaking the flow of the floated list to their right

    I’ve poked at the CSS quite a bit bu I’m afraid it could have something to do with javascript? Again, I’m fairly new and would greatly appreciate some advice

    Thanks for your time

Comments are closed.