Feed on
Posts
Comments

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

176 Responses to “jQuery Infinite Carousel Plugin 1.2 Released”

  1. sagar says:

    and also is it possible to display 3 pictures instead of single picture and text holder active only on middle picture.

  2. Adam says:

    I would like to know how I may add a heading 3 tag to the caption.

  3. michael says:

    I may have missed this, my apologies if so – curious to know if it’s possible to switch the color(s) on the thumbnail boxes when highlighted from red to whatever I color I choose, etc?

    Thanks!
    Michael

  4. michael says:

    i finally took the time to read some and figured it out.

    thanks dude.

  5. Nikolius says:

    Great Plugin, I will use it in my next project. i think it will be look great to display some headline news with picture.

    i have one question for the thumbnail picture. how can i display the whole image in the thumbnail section. i just want the image display in fullview, not just some area in the top left like this example. is that possible?

    i was wandering using a square image (250×250,500×500) so that it’s look nice in the thumbnail image too.

    sorry for poor english, hope you understand what i am saying. :)

    • admin says:

      @Nikolius
      Unfortunately that’s not possible because the plugin uses the real image as the background for the thumbnail image so it can place numbers on top of it, and background images can’t be resized or scaled. I suppose you could hack the plugin to place a copy of the image within the thumbnail div container and then change the size, however I’d think that scaling an image down that far might look bad.

  6. Pedroos says:

    Well, it’s a great little plugin. I have tested it in every possible browser and it works great, in modern browsers its perfect.

    I have one question, is there an easy way to change the thumbnails to circles with numbers and no background images? I made a few changes to the css but the navigation stopped working.

  7. Al.net says:

    thank you so much for your plugin… I was looking for something like that and fortunately you have made it!
    thanks once again!

  8. admin says:

    @Pedroos
    Easy way? Not really. You could try to use CSS3 rounded corners to get close to circles but that won’t work in IE. The alternative would be to create a round image to reuse as the background image of the thumbnail divs.

  9. Robson says:

    yo i need some help the plugin worked perfectly but its have damaged my pictures

    look: http://ww3.mp.mt.gov.br/__mpgaleria.inc.php

    i dont know what to do.

    i need some help.
    thx anyway

  10. Joshua says:

    Great plugin! Thank you for your time and effort. Quick question. This is my first implementation and I updated the plugin to recognize a DIV to rotate rather than a image. I have the image and text in the div. The client I’m working with wanted the text area to be present at all times, without effect. I updated the code below and it’s working great in FF, of course these changes blew up IE7. What am I missing?

    var numImages = $('div', obj).length; // Number of images
    var imgHeight = $('div:first', obj).height();
    var imgWidth = $('div:first', obj).width();

    Thanks!

  11. Joshua says:

    A quick follow up to my quick question. I might be over thinking everything. Would it be simpler to unhide/unanimate the paragraph and have it always displayed below the image? I’m a beginner with jQuery, so I’m really just guessing at everything.

    Thanks again!

  12. admin says:

    @Robson
    Looks fine to me

    @Joshua
    A link would be helpful

  13. Joshua says:

    I’m not sure how, but it started working. Thanks again for the great plugin!

  14. JD says:

    Great little plug-in. I made one change to it to make the path to the actual location of the js files a little more flexible.

    ~line 41: if(o.plugin_path) { plugin_path = o.plugin_path; } else { plugin_path = “/js/infiniteCarousel”; }

    This way, you can define the path in the initial call. I also had to change the image code like this:

    Not sure if it’s exactly how it’s supposed to be done.

    I do notice a small problem, that being that unless the pause text or left/right button is pushed, the play/pause and the minimize/close buttons won’t load when the page is loaded/refreshed. Noticed this in both Firefox and IE 8

  15. JD says:

    Stupid me, I didn’t notice the defaults part. Code changed like this:
    var defaults =
    {
    transitionSpeed : 1500,
    displayTime : 6000,
    textholderHeight : .2,
    displayProgressBar : 1,
    displayThumbnails: 1,
    displayThumbnailNumbers: 1,
    displayThumbnailBackground: 1,
    thumbnailWidth: ’20px’,
    thumbnailHeight: ’20px’,
    thumbnailFontSize: ‘.7em’,
    plugin_path: “/js/infiniteCarousel”
    };

    ~line 42: if(o.plugin_path) { plugin_path = o.plugin_path; }

  16. JD says:

    @Ron

    I was noticing the same problem, so I did the following:
    In my CSS, I added a display:none to #carousel in my css
    Then, before the jquery function call, I added this:
    $(document).ready(function() {
    $(“#carousel”).css({
    “display” : “block”
    });
    });
    Seems to have done the job for me, tested in FF, Safari and IE 8

  17. admin says:

    @JD
    Nice touch, I’ll try to use that in the future in this and my other plugins.

  18. jonatan says:

    Amazing!!! I’m looking that!

  19. Jason says:

    This is probably the world’s dumbest question about this plugin. Maybe its because I’m off sick today, and trying to learn about jQuery at the same time. Here it goes:

    I’m trying to get the slider to be centred in the container. I’ve messed around with the padding, the margins, the alignment options. I’ve even tried building it in a table, with cell alignment center/middle.

    For now, its located here: http://andrewgrant.jasonfearon.com/portfolio5.html

    Thanks….

  20. Jason says:

    @admin

    I did…but I’ve figured it out now – at least a workaround. Thanks for your help, and the great plugin!

  21. Ben Frain says:

    Just to say well done. This is an absolutely fantastic plugin, the literature is top notch (had no problems configuring it to do exactly what I wanted) and the examples are also extremely helpful.
    Can you let me know where I can send a donation? You won’t be able to retire on it but maybe treat yourself to a few beers/coffees on me…

  22. Greg says:

    Great plugin. I appreciate your hardwork. Thank you.

  23. Kevin says:

    Thank you for the time and effort! The options and functionality of this carousel are excellent (I love the thumbnails).

    Do you think it would be possible to fairly easy to expand the viewer to incorporate a few images at the same time? (and use the thumbnails as a page marker rather than an image marker)

    Thanks again. I’ve learned something.

  24. Joe says:

    First off, Thank You very much for sharing this great plugin. I’m having some trouble using PNG instead of the standard GIF buttons with the plugin. In IE7, the buttons throw a large black shadow when hovering over them. In IE 6, due to the lack of support of PNG files, I tried out several PNG fixes, for instance the jQuery ifixpng: http://jquery.khurshid.com/ifixpng.php. However, I simply cannot get any PNG fix to work. Maybe there is a slight chance you might have an idea on how to get a fix to work with infiniteCarousel.

    Thanks again!

  25. Joe says:

    PNG transparency problems in IE8 in conjunction with fades are a known problem. See this page here, which offers a heavy workaround: http://blog.mediaandme.be/?ref=17

    My feeling is that it would be nicer to embed the buttons of infiniteCarousel as background graphics, instead of img tags, so you could simply work around the IE6 and IE8 PNG transparency problems with URL changes to GIFs.

    The jQuery PNG fix by Andreas Eberhard will work with infiniteCarousel’s right/left button, but it does not work on the play/stop and close buttons. http://jquery.andreaseberhard.de/pngFix/ As of yet, I haven’t been able to figure out why.

Trackbacks/Pingbacks

  1. [...] 2. jQuery Infinite Carousel Plugin [...]

  2. [...] JQuery Infinite Carousel Je vous en parle ici Un effet de Carrousel pour vos images en jQuery. Le site [...]

  3. [...] jQuery Infinite Carousel Plugin | Demo [...]

  4. [...] 2. jQuery Infinite Carousel Plugin [...]

  5. [...] Try out a demo [...]

  6. [...] 4. jQuery Infinite Carousel Plugin [...]

  7. [...] 4. jQuery Infinite Carousel Plugin [...]

  8. [...] jQuery Infinite Carousel Plugin | Demo [...]

  9. [...] jQuery Infinite Carousel [...]

  10. [...] padding to the carousel area so that the previous and next images are hinted at (see demos below). Download [...]

  11. [...] * *Agile Carousel JQuery Plugin* * *3D Carousel* * *Skitter* * *Barousel* * *Tiny Carousel* * *Infinite Carousel jQuery Plugin* * *jQuery Cycle Plugin* * *Step Carousel Viewer* * *iCarousel* * *jQuery Feature Carousel* * [...]

  12. [...] * *Agile Carousel JQuery Plugin* * *3D Carousel* * *Skitter* * *Barousel* * *Tiny Carousel* * *Infinite Carousel jQuery Plugin* * *jQuery Cycle Plugin* * *Step Carousel Viewer* * *iCarousel* * *jQuery Feature Carousel* * [...]

  13. [...] 46. jQuery Infinite Carousel Plugin [...]