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:
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.
Hi,
‘v been trying to do that for half the day now… hum would mind by any chance posting an example of how to bind it to the carousel? It is kind of working but the mouseover stops the carousel only after a few miliseconds not immediately, for the restart though it works immediately. It looks like ‘transitionSpeed’ needs to be completed before it can stop…
[...] 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.
Anyone know how to change the sliding effects to just a simple fade in and fade out?
This isn’t that type of plugin. A fader carousel works entirely differently and is much easier to create.
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/
@bmayzure
Try giving all your images in the carousel explicit height and width attributes (e.g. … width=”860″ height=”300″)
I was thinking there was some errant CSS rule overriding the carousel’s CSS. Nope. Something that simple did the trick! It’s working as expected in Webkit-based browsers now. Who knew? Thanks for your help!
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!
This works exactly as I expected it to.
If you make adjustments in the future, I would like to be able to use my own next/prev buttons using as well as change the background color/opacity without diving into the plugin. If these could be added as options that would be really sweet.
Thanks for a super plugin.
Hola,
I love the plugin but have a small problem with it.
I would like to use links on every slide. I tried using simple tags and it works fine in FF and IE8, but in IE7 and 6 I am getting some nasty padding issues to the left and bottom of the box. Is there a way to fix this ?
:)
that would be simpe
<a href rel="nofollow">tags .. oops on the same mistake as the poster above :PI feel like such a noob. Thanks ever so much for the quick reply and the amazing plugin!
Hello there,
first of all I would like to congratulate you on this amazing plugin, really outstanding work! have used it on my website in different variations and it’s coping really well. I have one issue though: what element do I need to style to change the position of the “Left/Right” – Nav Arrows? I would like to have the buttons further down – how can this be done?
Thank you.
Regards,
Sebastian
@Sebastian
The navigation buttons are positioned automatically to be centered vertically however you can hack them however you like. Look for the two lines that set the positioning:
html = '<div id="btn_rt'+randID+'" style="position:absolute;right:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat 0 0"></div>';
and make whatever changes you want.html += '<div id="btn_lt'+randID+'" style="position:absolute;left:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat -13px 0"></div>';
Hey I just noticed the the carousel also responds to my mouse’s back and forward buttons. Cool. Anyone else try this? Must be some automatic jQuery magic since I didn’t code that feature in explicitly.
Hey there :) Thank you so much for your reply! I have already gotten that far by altering the values in the .js file you are talking about, but the problem is now that I have another, smaller image slide on my subpages – the problem is that the left/right buttons don’t show up there since I’ve specified them to appear lower; which is ideal for my frontpage but not so much for the subpages :<
Any idea?
@Sebastian
I’d need to see it.
Mh Ill try and explain it. Since I edit the position of the arrows in the File “jquery.infinitecarousel2.js” and the file will be the only one called by the script it will take the settings for all picture sliders no matter what size the pics are.
Front page: 950x350px with arrows left/right at the bottom
Sub-Pages: 950x120px, picture starts exactly where FrontPage picture starts, but is shorter (>120px). Since I’ve configured the button placement in “// Prev/next button(img)” in the file “jquery.infinitecarousel2.js” to be at 315px from the top it will move the arrows further down on the shorter banner, hence making it invisible.
BUT: i just found a solution. Just included two different versions of “jquery.infinitecarousel2.js”:
1. _big
2._small
That allows me to call the big one for the Frontpage and the small one for all my subpages. Easy!
How do I position my thumbnails within the container? I’d like to move them up into the container, make them horizontal and slightly larger.
Great piece of work, well done!
It’s exactly the stuff I need for a website that I’m building (not online yet).
However, I was wondering if I discovered a bug related to the transition speed. I downloaded the second demo (“Displaying and advancing more than one image at a time”) and played with the settings and noted that if the transition speed drops to 400 milliseconds or below, the images are not displayed correctly. If the speed is increased to 500 milliseconds or above it’s working fine.
Try with these settings:
$(‘#carousel’).infiniteCarousel({
displayTime: 5000,
transitionSpeed:400,
inView:2,
advance:2,
imagePath: ‘resources/’,
textholderHeight : .25,
padding:’5px’
});
Note that the imagePath is changed (to suit my purposes). I tested the above on an iMac with the following browsers: Firefox 3.6.3, Opera 10.10 build 6795, Safari 4.0.5, Google Chrome 5.0.342.7 beta, and I’ve experienced the same issue with all these browsers.
I just thought I’d let you know. Other than that… it’s an awesome carousel, thanks!
Hmmm, interesting bug. I’ll have to look into that further for the next version.
Thanks mate and good luck!
Bug squashed. I’ll have an updated version up by tonight or tomorrow afternoon. Thanks.
[...] released an small update to the jQuery plugin Infinite Carousel 2. As reported by Ervin, there was a bug triggered by small transition times that caused the carousel to behave [...]
This is a great product which i was looking for!!! Great Job!! Let me say this , 1st of all , I am a mainframe programmer and trying to play with web as i wanted to learn the new stuffs. I have two issues with my webpage.
1. The carousel images are 1st displaying in the web page one below another for few secs before the carousel starts. Everything is perfect after that. The timing is bad in IE8 and not that bad in other browsers. I am sure , my HTML tags might have some issue as I using Avanquest Webeasy software to build the site. Not sure how to fix it, though.
2. The text captions over the image is hidden. It’s just there…but not showing up. It worked good when I ran the demo in I.E. I could able to see the text when I highlight the image with the mouse, on my webpage
I believe, I may be missing some basic stuff here as I am new to web and using the 3rd party software to build the webpage. But, any help to address this issue greaty appriciated.
Thanks!
Sorry All. Looks like I had too much hight in the css. around 400. Cut and paste. I changed to to 500* 213… All good now. I yet to fix the text issue though. Thanks James for your input !
#carousel {
margin: 0 auto;
width: 500px;
height: 213px;
padding: 0;
overflow: scroll;
border: 2px solid #999;
Apperently you still have a small bug in IE7 and IE8. When you look closely in one of these browsers you see the text pixels of the div#textholder slide beneath the main wrapper of the slides when a new slide is loaded. It’s only 1 px in height and just above the thumbs. (just try the example on this page)
The problem I’m experiencing now in IE7 and IE8 is that some of those pixels remain in that 1px line beneath the main wrapper of the carousel.
I’m using the following settings:
$(‘#carousel’).infiniteCarousel({
displayThumbnails: 0,
inView: 3,
imagePath: ‘*’, (* = my personal image path of course)
textholderHeight: 0.19,
displayProgressBar: false
});
And I replaced the next and previous arrows with own images.
I tried some own coding, all with no success. Perhaps if you have time you could look into it?
Thanks
PS. Great script.
I think I see what you’re referring to, but it’s nearly imperceptible. I don’t see any text in the captions lingering after a transition either. And since the overflow property of the container is hidden, if somehow you see one pixel’s worth of text appearing in IE7 or IE8 then it would look to be a bug with those browsers (what a shock).
I’ve tried various solutions, none of them worked. It’s deffinitly an overflow:hidden / position: relative problem.
Perhaps you could consider implanting an option to prevent the caption animation in your next release?
Thanks for your reply btw,
Dries
Hello,
I absolutely LOVE this plugin! It does everything I wanted a carousel to do. The only thing I’m noticing is that the actual slide is a little choppy. I’ve always noticed this with JQuery I do. Are my images too large? I do have a preload function for the images. Any suggestions?
Thanks, Kelly
Also, can anyone tell my why this doesn’t work in IE7? I looked at the demos page in 7, but mine doesn’t work. What did I do wrong?
http://clients.ekcetera.com/vintagewearswares/index.php
Any help would be appreciated!
Hi, what can I do to let it work in Opera? I only get de images in a long row…
Thanks
MArk
An example of what you’re doing would help. The plugin works fine in Opera so the issue must be on your end.
Hi, I hope so that I am the problem….. ;-))
this is the site: http://cadeaubonnen.haaglandengifts.nl/
Can you see what I am doing wrong?
Mark
Hi, can you help me with my opera problem?
TNX
Mark
I’m so glad I’ve found a way to show rotating images! THANKS! Is there any way to display images randomly, or must they always go in the same order?
Well the images are displayed in the order that you place them when building the list of images, however you could randomize them when the page loads by using JavaScript to shuffle the array or the actual list of images itself. Shuffling the array would probably be a little easier but it would require that you tinker with the plugin, where shuffling the list of images could be done prior to calling the plugin but may take a little extra code.
Is there a possibility that the carousel can work with other content, for example block of text, or combination image+text in a div? The caption option in doesn’t give such freedom in handling the presentation.
Btw. This, as is, is great. Thanks a million! :)
Yes but you’d have to modify the plugin to do so. It looks for specific elements within the list, an image followed by text in a paragraph to be exact, but you could modify it to work with anything.
Nemanja,
Have you figured out a way to do this? I really need the text to scroll with the slide.
Thanks,
J
Is it possible to have the .textholder collapse to the left rather than the bottom? I am working with a 955px wide carousel and have set the .textholder to 375px wide.
Thanks!
Jeremiah
I need to set diferents displayTime for every Image in the carousel. Any solution?
I’d like to extend this to allow for dynamic loading of images as it cycles through. For example, 3 images are in the original DOM, but then more dynamically are added (perhaps from an array or another object). Any ideas on how to do this?
Thanks!
Hello
This is a really nice plug-in. Is there a way to control the plug-in from outside? like for example make it pause or play when a user clicks something else in the page. I tried to simulate a click on the pause/play button but it doesn’t work because the DIV tag doesn’t have the click() method.
Is there a way to do this without modifying the plug-in core?
There is a bug in the plug-in
Steps that will reproduce the bug:
1. Click any thumbnail for example the 4th of them (the plug-in pauses)
2. Click the play button to resume the play
3. Click another thumbnail for example the 2nd of them
4. Click the play button to resume play
What happens: The plug-in doesn’t resume the play
What was expected: The plug-in resumes the play and keep changing the images automatically.
This is a great plugin, very nicely put together and pretty robust too. However I can’t help but think that it would be much easier for developers implementing this plugin if all of the css wasnt stuck inside the js file. It makes for a lot of unnecessary inline styling and its really difficult to skin things like the nav buttons witohut hacking around in the js. I know it makes it so people can just add it into their site wihout worring about css, but it makes it difficult for people who want a bit more control over the styling.
But that aside its still an awesome plugin, thanks for all your hard work on it.
Hello,
Is there any way to make the thumbnails hot links? Clicking it once will take the user to the image it’s tied to. Is there any way to be able to create second set of clicks where the user will be taken to a specific page?
Thanks for the great plug in!
Terrific plugin! Thank you! One gripe though… I really wish there were an option to get rid of the play/pause button. I’m using it in a situation where a slideshow type behavior isn’t needed.
Try hiding them with CSS display:none