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. admin says:

    @Kevin
    You can add padding as in the example to hint at, or reveal completely, the previous and next images. However if you’re looking to display say three images at a time and rotate to the next three images upon clicking next or previous then no, this won’t do that and the logic would need to be changed to handle that. Unless of course you created single images that contained other images.

  2. Olli says:

    Is there any possibility to display the thumbnails on top of the image(s) (like the pause-button) instead of displaying them below?

    Kind regards,
    Olli

  3. admin says:

    @Olli
    If you want to display the thumbnail row above the images, try changing the “after” to “before” in the line (~113):
    $(obj).after(<div id="thumbs'+randID+'" style="position:relative;overflow:auto;text-align:left;padding-top:5px;"></div>');
    You may also want to change the padding from top to bottom.

  4. Jonas says:

    Hey, thanks for this great plugin. Is there any chance you could include a simple PNG fix, just like I noticed http://fancybox.net/ uses one itself? That would be awesome…and greatly appreciated! :-)

  5. Olli says:

    @admin
    Sorry, I did not make myself clear: I don’t want to display the thumbnails above/before the slideshow, but as an overlay. Is that possible?

    Kind regards,
    Olli

  6. John says:

    Hi,

    I used this plugin for listing a slide which is populated from the database. But when there is a single row returns as a result then, its not showing correctly
    in simple it seems a bug when there is only one record (li)

  7. admin says:

    @John
    Maybe I’m missing something but what’s the point of a slideshow for one image?

  8. Robyn says:

    I checked through all the comments from start to finish, as well as all the options – I see there is an option to show/hide the thumbnails, but this question has been asked a couple of times, but not answered – is there a built-in option to show/hide the navigation arrows and the play/pause button?

    I would like to have the slides automated and use the thumbnails but have no need for the arrows.

    If there is no option to show/hide navigation and controls, I’m guessing I will have to simply hide those controls in the CSS right?

    Thanks for a great plugin.

    Thanks

  9. fred says:

    Hi,

    Thank you very much for sharing this great plugin.
    I wonders about the way to modify it in order to display pictures with various width and to change the carousel width with a motion effect.

    Regards,

  10. Claude says:

    Many thanks! Works great and its easy to set up. Appreciate it very much! :-)

  11. ?ukasz says:

    Hi,
    at the beginning I would thank you for the plugin. I would like to ask you some question about that. Namely, how can I stop the animation and resume it later? I’m creating a webpage with complex design, and have more than 10 Infinity Carousels on one page. And it works, but works hardly slow (it jumps, it not going fluent). The Carousels are in the tabs, and only one is visible at any given time, so I want to stop other and start only visible carousel. Is that possible, or will that possible in future versions?

    Thank you.
    best regards,
    Lukas from Poland,

  12. David says:

    Hey –
    Love the plug. Exactly what I was looking for. But, I’m a very novice coder. And so, I’m not sure if it is something I have done but cannot rectify.

    I am showing the thumbnail images, and everything works great. That is, until the user starts to pick the thumbnails. It seems like the carousel “gets off track”. It loses it’s place. At first I thought I had not correctly set the width of the ul element to sum to the total width of all pictures. Then I ensured that all pictures were identically sized. And used the same captions.

    I cannot figure it out. it works perfectly until you make rapid selections that cause the carousel to have to move to a a picture at least one away from its current position.

    Please help?

  13. Andy says:

    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?

  14. 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.

  15. david says:

    Hey – Again, love the plug-in. Can I change a setting to default the text captions to be in minimized state? Also, why do the captions support some html like and tags, but not tags like or ?
    Tanks,
    David

  16. 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

  17. paul says:

    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

  18. 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

  19. paul says:

    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

    • admin says:

      @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.

      • paul says:

        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

      • paul says:

        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

    • admin says:

      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.

      • paul says:

        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

  20. Thanh says:

    Is there anyway that I can make the textholder background color transparent black rather than white??

    • admin says:

      @Thanh
      Sure, just use CSS to style the text holders.

      • Thanh says:

        I tried adding this: .textholder{ background-color:#000; } but its not working

      • Thanh says:

        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.

  21. Robert Sexton says:

    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!

    • admin says:

      @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 :)

      • Robert Sexton says:

        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.

  22. I recommend adding some padding to the text in the caption box .. gets a bit hard to read at times.

  23. Noah Funk says:

    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

  24. George says:

    Just brilliant and thanks very much for sharing.

Trackbacks/Pingbacks

  1. […] infinitecarousel plugin 1.2.2 Refer to the author’s documentation for additional notes on how to use […]

  2. […] infinitecarousel plugin 1.2.2 Refer to the author’s documentation for additional notes on how to use […]

  3. […] infinitecarousel plugin 1.2.2 Refer to the author’s documentation for additional notes on how to use […]

  4. […] infinitecarousel plugin 1.2.2 Refer to the author’s documentation for additional notes on how to use […]

  5. […] the smooth internal scrolling, elements moving at different speeds [parallax], fading images, course carousel and popup […]