As announced earlier, I’m happy to release version 2 of the jQuery Infinite Carousel plugin. What happened to versions 1.3-1.9 you ask? Well, since I overhauled the old plugin and added so many new features, it just seemed fitting to brand this release with a whole new version number. Heck I could’ve named it version Infinite Carousel, the “Illudium Q-36 Explosive Space Modulator” edition, but it seemed a bit wordy. Anyway, like it matters. All you want is the plugin right?
So What’s New?
Where to begin? Based on feedback from users, I’ve added more options than you can shake a stick at. Go on, get a stick. Shake. Can’t be done. There are so many new features that I was a bit worried that the plugin might suffer from option overload, but in the end I think what remained was not only useful but vital to the plugin.
In addition to the features in the previous version, I’ve added the ability to:
- add easing as an option with separate left and right easing effects
- specify the path to the navigation images as an option
- specify how many images should be viewable at once
- specify padding around images
- specify how many images should advance when the user navigates using the previous and next controls as well as when the carousel is running automatically
- hide navigation controls
- auto hide navigation controls so that they appear only when the user moves their mouse over the carousel
- auto hide captions so that they appear only when the user moves their mouse over the carousel
- prevent the carousel from automatically starting
- move the previous and next navigation control outside the carousel so that they don’t appear on top of any images
- use keyboard navigation with the ability to disable it (left and right arrows for previous/next, p for pause, s for start)
- access callback functions
The Most Basic Example
Download
jQuery.InfiniteCarousel2.zip (contains the uncompressed and minified versions in the same zip file. The uncompressed plugin is about 18k while the minified version is about 9k)
Demos
To show off some of the things version 2 can do, I’ve created several demo pages for easy viewing. Each demo link will open in a new window. View the source code for a demo to see the options that were selected.
- A basic example with default settings
- Displaying and advancing more than one image at a time
- Displaying multiple images while advancing one at a time with easing effects
- Navigation outside the carousel with captions automatically hidden
- Thumbnails and navigation hidden. Keyboard navigation active
- Navigation automatically hidden with keyboard controls disabled. Also shows how to hint at the next and last images using CSS
- An example of callback functions
- An example of how easy it is to integrate with a lightbox plugin. Easing functions are also being used in this example
- An infinitely scrolling slideshow with no controls enabled
How to Use
With the exception of new options, the carousel works in the same way as previous versions. 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 (see demo #6 above). 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-2.0.0.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.
Be sure to check out the demos above!
Note that in this new version of the carousel, since the path to the navigation images is an option, you may need to specify the path to your installation if you aren’t using the path of “/js/infinitecarousel/images/” which is the plugin’s default path. More on the options 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 800)
- 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: .25)
- displayProgressBar – Boolean. Whether or not to display the progress bar (default: true)
- displayThumbnails – Boolean. Whether or not to display the thumbnails for the carousel. (default: true)
- displayThumbnailNumbers – Boolean. Whether or not to automatically place numbers in the thumbnail boxes. (default: true)
- displayThumbnailBackground – Boolean. Whether or not to use the corresponding image as the background for a thumbnail box. (default: true)
- 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)
- easeLeft – The type of easing to use when the carousel moves images to the left. Here you can use the jQuery easing plugin and specify any type of easing, or use jQuery’s built-in defaults of ‘linear’ or ’swing’. (default: ‘linear’)
- easeRight- The type of easing to use when the carousel moves images to the right. Here you can use the jQuery easing plugin and specify any type of easing, or use jQuery’s built-in defaults of ‘linear’ or ’swing’. (default: ‘linear’)
- imagePath – The path to the carousel’s navigation images (now sprites). (default: ‘/js/infinitecarousel/images/’)
- inView – The number of images to display at once. (default: 1)
- padding – The amount of padding to be applied around each image. (default: ‘0px’)
- advance – The number of images to be moved either automatically, or when the user moves images by using the navigation controls. (default: 1)
- showControls – Boolean. Whether or not to display the navigation buttons for previous, next, play and pause. (default: true)
- autoHideControls – Boolean. Whether or not to automatically hide the navigation controls. (default: false)
- autoHideCaptions – Boolean. Whether or not to automatically hide the captions (if any). (default: false)
- autoStart – Boolean. Whether or not to automatically begin the carousel. (default: true)
- prevNextInternal – Boolean. Display the navigation on the inside of the carousel. If false, controls will be dispayed outside and next to the carousel. (default: true)
- enableKeyboardNav – Boolean. Enable keyboard navigation (kind of obvious no?). The left and right arrows are used to move the images, while ‘p’ pauses the show and ’s’ starts it. (default: true)
- onSlideStart. A callback function triggered when the images begin to move
- onSlideEnd. A callback function triggered when the images stop moving. An array of images being displayed is returned
- onPauseClick A callback function triggered when the carousel is paused
Options are added when calling the script:
$('#carousel').infiniteCarousel({
transitionSpeed : 2000,
displayTime : 10000,
textholderHeight : .25,
displayProgressBar : false
});
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!
Previous Version
I will continue to make the previous versions of the Infinite Carousel available until there seems to be no demand for them. To download them, click here.
Thanks so much for the plugin – I hadn’t used the previous version, but it’s a big improvement over the other carousel plugin I was using. It’s got more useful features and it doesn’t break with my other stuff, which is a serious bonus.
Out of curiosity, what would it take to set up a pause on mouseover, resume on mouseout?
Thanks again, and Happy New Year!
Frank
@Frank
I haven’t tried this one yet but it should just be a matter of tying the pause and play functions to the mouseover event of the carousel object. I’ll play around with it and send you an email with my results.
[...] jQuery Infinite Carousel – Version 2 released – Link. [...]
Thanks for making and releasing it free – I mean the jQuery Infinite Carousel plugin version 2! I also linked in from my blog.
Having set out two days ago to completely redesign one of my sites for 2010 (not the one linked above) I started using infiniteCarousel 1.2 after evaluating a whole load and figuring that this was the best. I soon found I was also using ‘Panel Gallery’ and ‘Before/After’ – maybe even ‘Drop Caption’ too!
These are such great little plugins – thanks a bunch for creating them and making them available to all!
And now I’ve just discovered the Version 2 release – wow, even more goodness! The extra options will be explored forthwith…
I had never dabbled with jQuery before and despite being a non-programmer (just a humble CSS/XHTML coder) found all of these add-ons easy to implement. When my site is complete I’ll write about the experience and also give credit and link to your work. I’m sure that there would be many who would willingly make a small donation of some sort as a sign of gratitude – I know I would.
Best wishes from the UK and have a great 2010!
I’ve now tried Version 2 and it’s working fine but I have a quick question.
The caption textbox doesn’t seem to drop down quite enough – see example: http://www.art2science.co.uk/2010/test.html
Is there a way this can be set to drop almost completely out of view so that no lines of text are visible when it is hidden?
Forget the question above – just realised I had set the padding incorrectly on .textholder.
Problem solved – another great plugin!
[...] Téléchargement : http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/ [...]
Great work buddy!
I think it might help in the cases that you want to put other thumbnails than the caption from the large image, not to use random ids, or to put as an option the range for the ids, so via css you can assign the image that goes with large one.
Thanks for sharing this with all of us!
Santino
@Santino
Hmmm, I don’t think that’s possible since the plugin created the thumbnails dynamically and needs to give them unique identifiers, especially for cases where the plugin is used more than once per page. All the thumbnails have the class “thumb” so you might be able to use that to target them, or just target the containing div as the div that immediately follows the container.
This way i could only assign style to all of them, i need to add a different image to each of the thumbs, do you have any idea how to do this?
thanks,
Santino
very nice
Wondering if you have an example for us, that would enable – mouseover ‘thumb’ which changes the image – rather than a mouse click event?
thanks
@scott
Example? No. But if you want mousing over the thumbnails to change images instead of clicking them, then you should be able to change the plugin and remove the click event from the thumbnails and replace it with mouseenter or mouseover.
It works beautifully – I love it.
Great job.
Hey. Brilliant bit of coding, have used it a couple of times now and am very happy with it.
Is there an easy way to have the gallery not pause when you manually navigate left and right? I don’t really want to use the play pause button so have hidden it with css, but then when you skip left or right the slideshow seems to stop. Is there a way that it could be set to just reset the timer and not stop, of failing that have the play button appear only when it has been paused?
Cheers.
Great plugin. Wouldn’t it a great idea to extend the functionality with optional fades instead of sliding, like shown here: http://www.serie3.info/s3slider/demonstration.html This is also jQuery based.
Nice but I think the logic is quite different. Fading is very simple whereas the sliding manipulation is more complex.
This looks like a great plug in. I am a newbie dev, and I am having trouble getting the next/prev and play pause etc buttons to display. I am using FF 3.5.7 and even the demo included with infinitecarousel-1_2 isn’t displaying the buttons. I am trying to use version 2 and having the same issue.
Or am I adding padding to the wrong places? Where should I add padding to get the next/prev hints? I have tried adding padding to everywhere but no success.
Thanks for the plug in – hopefully I can get it working soon!
@twitch
Try looking at the code from the demos, specifically http://www.catchmyfame.com/jquery/infinitecarousel2/demo/d6.html. Left and right padding should be applied to the div that contains your images, not to the previous/next navigation buttons.
Hello again.
Quick question, does this plugin support ie7? I’m getting errors and wonder whether this is an issue you are aware of or not?
Cheers.
@Tim
Yes, it works in IE7/8. Are you getting errors on the demos here or on your site?
Ah okay, thats cool. Its just I was having problems with ie7 on two seperate sites so checking it wasn’t an underlying issue…
…now just need to figure out whats causing it!..
Cheers.
Very nice! Thanks for the great job!
I just had some issue when testing the plugin: when the gallery has only one image, the carousel is not displayed at all ! Is it a bug or a feature?
Cheers.
@Patryk
What in the world would be the point of a carousel with one image?
Great plugin! Thank you! “Hacked” it to show thumbnails centered below main image – could be nice to see this right from start.
Great plugin! Thank you! I’m looking the way to run the plugin through an ajax call.
I use the QCUBED PHP framework. I have a tree nav in a left panel, the carousel in a right panel.
When I click on an tree nav’s item, I change the content of the UL but I don’t know how to “reload” the infiniteCarousel. Do you plan to add a callback function on this purpose ?
love the script!
i wanted to see if there was a way for the thumbnail to be a scaled down version of the actual image instead of showing the upper left hand corner of it.
thanks!
@nino
http://www.catchmyfame.com/2010/02/03/thumbnails-in-the-infinite-carousel/
[...] 1. Front page carousel – the image rotates and faded ‘Next’ & ‘Previous’ buttons allow the user to skip to the next promotion [made possible with CatchMyFame's Carousel 2] [...]
Thanks for the great job!
I need help.
The code works only with images. I’m trying to include video in one of the li elements. I’ve increased the width of the carousel and works fine in first loop then the element is missing. Does anybody have a similar experience?
website example of the site is on the internal server.
Margo
@Margo
This may be possible, however I never tested the plugin using videos. I’m guessing that since it’s looking for images and their attributes, when you’re substituting videos that it’s not finding certain values that it needs. I’ll see if I can test it out, however could you also post some of your HTML where your video exists? You can use fake names and paths if you like.
Thank you,
You are absolutely correct. The script is looking for the img tag. I’ve made the video work, but scrolling wasn’t correct. The the video box was not included in the prev loop
I’m trying to display the video in the modal window.
One more question, is there an option to stop the caption animation?
Margo
Let me know if you need an example.
Someone was inquiring about the ‘pause on hover’. That’s how I did it:
$(this).hover(function(){
forcePause();
},
function() {
forceStart();
});
Put this stuff at the end of the code, just before the latest block, before:
// Kickoff the show
This is it, quite straightforward. Needless to say, it would be awesome to have this integrated and added as an option.
Cheers,
Davide
I would LOVE to see a way to cycle through images which differ in width and/or height. Basically a carousel which just cycles LI-elements. I guess this sounds basic but is complicated?
brilliant script!
Only question i have is is there a way to separate the opacity of the the textholder from the caption text?
Ji, great work!! One question: where can I change the red border around the thumbnail?? I want it a different collor matching my site.
Thanks!!!
@jbenjamin
You can change the opacity via CSS
@Mark
You can change the color via CSS or directly in the script.
I’ve encountered a strange problem where this carousel behaves as it should in Firefox 3.5/3.6, Opera 10, and IE 7 and 8 (and even behaves tolerably in IE6!). But a strange bug manifests itself in Safari 3 (Windows) & 4 (Mac) and Google Chrome (4.1.x Windows/5.0.x Mac).
From what I can see in Safari 4 Mac Developer plugin, it appears the script sets an inline style for the div #carousel with height and width set to 0px. I have a rule in my site’s CSS to override that, but unfortunately that’s not working. The result is I get a dot with a 2px border around it. It seems the script isn’t getting the dimensions of the image with Webkit browsers, though this appears to be working in Gecko, Presto and Trident browsers.
Any ideas what’s going on here?
I don’t own a Mac but I do test on Safari and Chrome and I’m not seeing anything like you’re describing. Maybe a screen shot would help?
I can do better than that — have a look: http://dev.velocitymedia.us/coasttocoast/ (username: jquery password: carousel — it’s only in a PW protected dir to keep the search spiders out, really)
Bad link.
Unfortunately, no, having server issues. Seems only about 30% of the internet can see my server today (probably because it’s cached). Sorry. I’ll let you know when that is resolved, because I’d really like to get to the bottom of this oddity with Webkit browsers.
Hi again. I’ve got the site live now, despite the weird webkit issues. If you don’t mind taking a look at it, I could use the advice to fix it. http://www.coasttocoastincentives.com/
Excellent plugin – i like that it validates!
is it possible to have text controls instead of the generated ones?
i’d like to be able to style the controls myself, and could do this easily if the buttons were just tags … can you explain how to do that please?
was meant to say < a href = " " tags but it made it a link ^_^
i know from above i can edit the buttons in the css and in the code, it would be nice to have plain html buttons for 1 2 3 4 5 pause, play, next, last .. thanks!