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.
Related posts:
Plugin is working but when it loads it shows unstyled content on the page because the jquery has not finished loading. So I did some research and found this article:
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content#comments-title
When I implement this technique in the article the carousel does not display. It is in the sourcecode but for some reason the width and height of carousel is way to small of 40px instead of the width of 941px.
Anyone have any ideas??
Using this to add JS class:
document.documentElement.className = ‘js’;
Then I have this as my CSS:
.js .jqueryhide{display:none;}
html is like this:
Carousel content
This is to show content when javascript is turned on
$(‘body’).removeClass(‘jqueryhide’);
Try jquery spinner
Hi,
Nice work yet again. the only snag i run into is that the navigation images are i JS and not the css. When i try to strip them out of the js and put them into the css it’s not cross browser and fails in IE. Shame cause its a nice plug otherwise.
Is it possible (how difficult would it be) to display larger thumbnails, and vertically?
Hi. Very nice program. My husband and I were actually writing something like this last year to use on a family photography site we were putting together, but I had to abandon it when I got pregnant (I found it very hard to do AJAX when I was throwing up all the time from morning sickness! :-)) Anyway, could you please please tell me how I can set this to make the thumbnails show a minified version of the ENTIRE photo? It is only showing “parts” of the big photo, so you really dont have any way of knowing what the large/main photo is from looking at the thumbnail! This is probably in one of the settings strings, but silly me I can’t find it :-P
I hope you can help me– and thanks SO MUCH for writing this!!
~~Sam~~
I’m trying to use the carousel with YouTube and Vimeo videos. Everything is working great but it there a way to have the carousel pause when someone clicks to play a video?
Thanks!
How about a data Pager plugin? awesome work again
Hi,
Thanks for the awesome plugin. Is there an easy way to find out which image is currently showing?
Thanks!
Try using target_num[1] or viewable[0]. I don’t recall offhand which one.
Nice plugin. How can I move the navigation controller around without hacking with the plugin? Can I change some css? I dont want the controller over the images.
OK. I found the option: prevNextInternal and it solved my issue. But the “Pause” button is still on top of my thumbnail. I either want to hide it or move it. any suggestion?
Hi,
Awesome plugin – I’m using it with WordPress and it’s proving much more flexible than the WordPress plugins that I’ve found.
And, I’m having a slight problem – I can get the first two images to pop up in a light box, but from third image onwards they open in a new page! Any ideas?
Many thanks,
Antony
Hi, me again. It seems to be occurring after images have been slid across – when I view 3 images at a time I can click on each and they display fine in the light box – after I’ve moved images across, they pop up in a separate page!
FYI: I’m using Lightbox Plus in WordPress if that makes a difference – I will have a go at installing fancybox.
Any suggestions greatly appreciated.
Antony
Eurika! Sorted…
I think it was down to a jquery conflict in WordPress – used the following code…
jQuery.noConflict();
jQuery(function ($) {
$(‘#carousel_principles’).infiniteCarousel({
…your settings here
});
});
Now works fab with Lightbox Plus (WordPress plugin) without having to reference it.
Hope this helps.
I was wondering if anyone has any ideas on this post I made a few weeks ago. Thanks for the help!
I’m trying to use the carousel with YouTube and Vimeo videos. Everything is working great but it there a way to have the carousel pause when someone clicks to play a video?
Thanks!
Hey, can you post steps and code to get this to work with youtube and vimeo? I have not been able to solve. Thank you!
Firstly, I must say that this is the best jQuery carousel that I’ve used thus far .. well done!
I was wondering how to make the carousel to scroll vertically with buttons positioned at the top and bottom of the carousel?
Apologize if this has already been covered.
Thanks!
Fantastic jQuery carousel, shame you need to set the image width and height, which makes it unusable for me. All of my images are different widths and heights.
Hi, love the slideshow, but is there a way to centre the thumbnails under the image? I can centre the image on the page using {margin: 0 auto;} but I cannot centre the thumbnails.
Hi, great plugin.
Just wondering if there was anyway to disable all or some of the styles that are generated, such as:
div id=”btn_lt56542545″ – this comes with loads of styles that I would like to override. or do I need to go into the .js and remove things?
Thanks,
Tom
[...] [...]
[...] Site Officiel : http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/ [...]
Hi.
Is there anyway that if there is only one image it will still show it?
At the moment it doesn’t show anything. I know this goes against the whole point of the slideshow but depending on the client, they may only want one.
Thanks
Tom
Nope, not without a hack. And you made your own point, what’s a carousel with one image?
Hi, hoping someone can help
This is the first plugin i’ve ever used (and I only heard the word Jquery a few days ago)
I’ve got the carousel working but I can’t seem to get the leftright, play pause, images to show. (The area where they would be displayed still works as left and right etc i.e. my mouse turns to a hand link pointer and the link works but its completely invisible)
I’ve tried setting the imagePath from anything to just the folder right through to ‘C:\Documents and Settings\Compaq_Owner\My Documents\Website\carousel\js\infinitecarousel\images’
I’ve tried setting it to prevNextInternal: false but all that does is move my invisible link outside the frame
Anyone know what i’m doing wrong?
It’s ok – I’ve redownloaded the zip file and its working fine now
Great job. How do I make work like a normal scroller (not infinite?)
Great Plugin, Good job. For me it works in three minutes setup. But i am not sure if there is an easy way to change some css with out hacking with the plugin. for example i want to change the background color of the caption and some other staffs too .. Any help please.
[...] Catch My Flame: Infinite Caroursel – excellent slideshow/gallery software [...]
Thank you for this great plugin.
I just integrated it into a Prestashop module for my own needs (next version of my site).
Do you mind if I publish this module in the Prestashop community, with the original files of the zip and the images of the demo on this page tohave a working carousel in prestashop in 1 click… ?
Thanks
Christophe