jCarousel
Posted in Miscellaneous by Jan on September 13, 2006 at 10:10h 
Riding carousels with jQuery
Author: Jan Sorgalla
Version: 0.2.3 (Changelog)
Download: jcarousel.tar.gz or jcarousel.zip
Licence: MIT and GPL
Documentation: http://sorgalla.com/projects/jcarousel/
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
Examples
The following examples illustrate the possibilities of jCarousel
- Static Examples
- Dynamic Examples
- Carousel with dynamic content loading via JavaScript
- Carousel with dynamic content loading via Ajax
- Carousel with dynamic content loading via Ajax from a PHP script
- Carousel with dynamic content loading via Ajax from the Flickr photo stream
- Carousel with dynamic content loading via Ajax from the Flickr API
- Special Examples
Comments are closed. Please post questions and/or bugs at the jQuery Mailinglist.
hi Jan,
Thanks for the carrousel. now i am trying to use the dynamic content loading via ajax. as newbie i do not understand where the large size images come from. please give me a clue.
thanks in advance and regards
Geert
The following line does the trick:
var url_m = url.replace(/_s.jpg/g, '_m.jpg');Flickr stores the small images with a _s.jpg suffix and the medium images with a _m.jpg suffix.
Thanks from making multiple carousels controlable by a sigle set of buttons.
okay, but your example_dynamic_ajax.txt file does not contain the m_.jpg url’s and that is what I am looking for.
The small and medium images only differ from the suffix.
Small:
http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg
Medium:
http://static.flickr.com/66/199481236_dc98b5abb3_m.jpg
So, the script simply replaces the suffix _s.jpg by _m.jpg.
Great! Thanks for your help.
using “Carousel with dynamic content loading via Ajax” is every image using the same ThickBox info—or can i ad individual captions and all the other features of ThickBox to each specific image? Also can I ad information within the jCarousel (ie: a caption or title) using the same text/ajax file? if not is it possible to do at all?
thanks!
Hey Jan, jcarousel is awesome. Nice job. Do you know of any problems with jcarousel (javascript version) in IE 6 & 7 (PC) and Safari (mac). Your examples seem to load properly only sometimes. other times nothing shows up. Any idea why?
In IE I get the error:
Line: 160
Char: 5
Error: Object doesn’t support this property or method
Code: 0
URL: http://sorgalla.com/projects/jcarousel/example_dynamic_javascript.html
Thanks
@hank: I’ve updated the ajax example to work with rel and title attributes.
@Dave: There was a small error in the example. Its fixed now.
Jan, thanks for your help. It seems to be working fine with Firefox (mac) but thickbox will not load the “_m” images in Safari, and I have not tested on a PC yet. Is there any way to fix this?
thanks again
I don’t have Safari to test it. Don’t know if its a jCarousel or a Thickbox thing. I’m going to vacation for 1 week, i’ll check it when i’m back…
First, great work! Everything works fine in Firefox 1.5 Mac but there are some problems in Safari 2.0.4 (the latest version):
On the “Simple carousel”, “Carousel with custom prev/next buttons”, “Vertical carousel”, “Carousel with autoscrolling”, “Carousel illustrating the item callback functions”, “2 carousels on one page” pages: all the images show in a vertical stack as the page loads then they disappear and everything looks and works fine. This only happens the first time the page loads. If the page is refreshed from cache the problem is gone. In “2 carousels on one page, 1 set of buttons” there are two columns.This does NOT happen in any of the dynamic loading examples.
Hank is right; Safari doesn’t load in the Thickbox medium size images. I tried all the examples on the Thickbox example page (http://jquery.com/demo/thickbox/) in Safari and they all work fine.
This is great! Is there a way to have this pull full HTML pages instead of just images?
Also, can we add tabs or buttons for each item that’s getting pulled? I have 3-5 items I want to slide into view every 3-5 seconds…unless someone is hovering their mouse over the content or clicks on a button or tab.
This would be the best app for us to use on the homepage of our News site down here in SW Florida if I could do those 2 things with it.
The Safari bug is fixed (small changes in function getItemHTML()).
Thanks for fixing the ThickBox problem with Safari! The only problem left is the images showing in a vertical stack as the page loads.
Just add
#mycarousel {
display: none;
}
like its in the dynamic examples.
Im trying to use jcarousel - works fine in IE
But - in firefox doesn’t show any of my thumbs and doesn’t appear to be large enough for 4 - 100 x 100 thumbs.
heres the page im working on
http://www.catswilleatyou.com/temp_drawings_fig.html
any clue as to what im missing?
Hi, It is very nice work.
I am looking for any plugin in jQuery, for viewing panoramatic photos.
Is it possible to use jCarousel for this purpose?
No, i dont think so. If you give me an example what you’re talking about exactly, i may think about writing a new jQuery plugin. No promise though
For panoramic photos try: http://motherrussia.polyester.se/jquery/panview/ Doesn’t work in Safari though.
I finally got mine to work. http://www.catswilleatyou.com/drawings_fig.html
Thanks so much for this - it was exactly what I was looking for.
But 2 questions
Is there a way to make it scroll to the end when you click back from the beginning right away? (Much like how when you get to the end it scrolls back to the beginning) That would be very handy
Also
Would it be possible to create external links and have it scroll until it made it to a specific target? (I’m dealing with potentially hundreds of thumbs)
Hey Jan, this is really working out well, very nice implementation of a complex set of factors.
Re: Carousel with dynamic content loading via Ajax. Does anyone know if it’s possible to easily pass a different image for the pop-up?
@matt:
1.) No
2.) Don’t know exactly what you mean.
@Randy:
The innerHTML of an item should look like:
<a href="my-image.jpg" class="thickbox" rel="nofollow"><img src="my-thumbnail.jpg" /></a>where the href is the pop-up image.
I am wondering if I am able to change the default loading image?
I want to create a list in a certain order, but show say the second or third image in the list, when the carousel is activated. I can show you privately the URL as it’s work in progress. Thanks.
OK, here’s what I’ve done.
Add itemStart: 1 to priv = { o:{} }
Then within init: function(e, o) replace priv.scroll(1); with priv.scroll(priv.o.itemStart);
The problem with this is that it SCROLLS to the image you want, instead of displaying it straightaway, which is what I want to achieve. If this is possible, please could you tell me how!!
I have also added $(this).get(0).blur(); to nextClick: function() { priv.next();} and prevClick: function() { priv.prev();} so when the previous/next buttons are clicked, the halo is removed.
Try
var sa = priv.o.scrollAnimation;
priv.o.scrollAnimation = false;
priv.scroll(priv.o.itemStart);
priv.o.scrollAnimation = sa;
Cool, that seems to work. Although there is a slight flicker, it shows the first in the list, then shows the correct one. Thanks for the help.
BTW, in a next release, you should add rel=”next” and rel=”prev” to the previous/next buttons.
@jan
my page http://www.catswilleatyou.com/drawings_fig.html
if you were looking for the image “steph001″
its way at the bottom
takes forever to get to
if i could set up links
(not INSIDE the carousel but maybe on my left navigation)
for each models name - then you click and it scrolls to that area of the list
or another solution to make having 100+ thumbs on the same page and have it still be tolerable to use
im using your carousel to replace the iframes i was using before like on this page ->
http://www.catswilleatyou.com/paintings_recent.html
Thats not possible at the moment. But i’ll keep that in mind for the next version.
thanks!
I want use my pictures!
I’m trying with Ajax dinamic!
Only Flick compatible?
How change the url to obtain the pictures?
Hi Jan,
There is a demo with panoramatic images
http://www.mad4milk.net/examples/scrolling-background-image/
anythink what I am searching for in jQuery.
This is fantastic - I’ve got it working pretty well.
Just wondering if there’s any way to adapt it so that a mouseover will pause the autoscroll. I know that’s fancy-schmancy, but just wondering.
Thanks!
I’m gonna add that to the next version.
aweomse
congratulations, perfect application!
not compatible system with firefox 2.0
which would be the best option to convert this?
Re: dynamic content loading via Ajax EXAMPLE and my installation, I’ve noticed 2 problems:
1. Upon page load, the script queries only 5 images into the display (array?)
2. The array ignores image number 1
I got around the 2nd issue manually, not sure how to fix the 1st. Has this been discussed or fixed? Other than this, I’m just about done with my installation (seen here: http://georgieworld.conflare.com)
Thanks Jan!
1.) Yep, the ajax example isn’t a good place to show the gallery feature of Thickbox because it needs all images loaded on page load and the example shows how to load images only if they needed. So, i removed the gallery function in the example.
2.) There was a small bug in the function appendItemCallback(). Its fixed now.
Hello there,
I’d like to have a simple DIV auto-scroll a single line of text if it doesn’t fit into the container. Will jCarousel do this? I have a 300×150px DIV that would display a short quote of the day sort of thing. It is pulled from a database randomly. If it doesn’t fit in the DIV, I’d like it to slowly scroll from the bottom up.. similar to motion picture credits. Any ideas would be great!
Thats nothing you need jCarousel for. This can be done with jQuery in 3 lines:
jQuery(document).ready(function() { jQuery("#text").animate( {top: -(jQuery("#text").height() - jQuery("#text").parent().height())}, 20000 ); });That will scroll the inner div:
<div style="position:absolute; width:300px; height:150px; overflow:hidden;"> <div id="text" style="position:relative; top:0; left;0;"> Text goes here </div> </div>Can it be possible to illustrate a drag&drop from carousel to a basket?
where can we ask questions regarding this component.
i want to use it in production but afraid of what i will do when the unexpected happens - i think this component need a community (even if small)
is there a google group or something for this component?
Just sign up for the jQuery mailinglist:
http://jquery.com/discuss/
Hello Jan,
Im in a bind here, I am trying to get your carousel -
http://sorgalla.com/projects/jcarousel/example_dynamic_ajax.html
- to load up into a thickbox window… (the entire carousel in the thickbox - not just the ‘larger image’)
Here is the link for what I am trying to accomplish:
http://underdude.com/test/
As you can see, when you click the test link, the thickbox loads the gallery carousel (but no images, and no opaque background???)… if you click close and hit the link again, it will load the window with the images…
However, try playing with the prev/next buttons now, you will see some funky things happening! LOL….. I have played around with different options for a couple hours now, and just can’t get it to work… any help would be appreciated.
On its own, the ‘galleryTest.html’ page works perfectly — just not when it is loaded into the window… any ideas?
Thanks a bunch!
Chris
Hello Jon,
Thank you for the carousel. Nice job. The carousel download this available?
thanks in advance and regards
Daniel
Hi Jan,
Really nice work.
I saw an old post on Nabble inquiring about an infinite loop ability. Has there been any progress on this? I would like to be able to keep hitting prev or next to continuously go through the images without having the ‘rewind’ at the end. I’m sort of getting around this now by only having 1 image visible, and 0 animation/scroll. This way clicking next from the last image seamlessly brings you back to image0. Doesn’t work for the prev button though, obviously.
Is there some way I could do this myself, using a callback function from image0 to set the prev click to show the last image? Seems everything else would take care of itself from there.
Adam
hey Jan,
I have noticed a null error in javascript on
http://sorgalla.com/projects/jcarousel/example_dynamic_ajax.html
have you seen this? BTW this is a really great plugin
@Adam:
No, no news. I don’t have much time at the moment. As far as i see theres no chance to handle that with the current version.
@Darren:
Seems to be a bug in IE with current jQuery version 1.0.3. Thanks for the hint.
Well I’ve had some minor success. As I said the work around for me from last image to first image satisfies my needs, so I haven’t messed with anything there. Using prev to go from first image to last has been tricky though. First I modified doNext, so if there are no previous images it jumps to the last after which everything takes care of itself:
doPrev: function() {
priv.first-priv.o.itemScroll == 0 ? priv.scroll(priv.end) : priv.scroll(priv.first - priv.o.itemScroll); // modified to loop - agent2026
priv.startAuto();
},
Having trouble with the jQuery in buttons: function(next, prev) though. If I change the class from “jcarousel-prev-disabled” to “jcarousel-prev” the prev button still won’t work on the first load, but, after clicking next the first time, prev will loop you right around (though the css breaks).
So this doesn’t work with the first load and breaks the css, but it will loop on subsequent loads:
buttons: function(next, prev) {
if (priv.o.noButtons) return;
if (priv.o.nextButtonStateHandler != null)
jQuery(”.jcarousel-next”, priv.scope).each(function() { priv.o.nextButtonStateHandler(publ, this, next); });
if (priv.o.prevButtonStateHandler != null)
jQuery(”.jcarousel-prev”, priv.scope).each(function() { priv.o.prevButtonStateHandler(publ, this, prev); });
jQuery(”.jcarousel-next”, priv.scope)[next ? "bind" : "unbind"](”click”, priv.nextClick)[next ? "removeClass" : "addClass"](”jcarousel-next-disabled”)[next ? "removeAttr" : "attr"](”disabled”, true);
jQuery(”.jcarousel-prev”, priv.scope)[prev ? "bind" : "unbind"](”click”, priv.prevClick)[prev ? "removeClass" : "addClass"](”jcarousel-prev”)[prev ? "removeAttr" : "attr"](”disabled”, true);
},
Any ideas?
Adam
Typo, First I modified [doPrev]…
sorry about posting that other message in your blog and not here about the IE null problem and the AJAX example. If we use the old version of jQuery will everything work right?. of course until you find the fix.
Also I posted about using the ThickBox.js to grab an html document instead of just the image, any way to do that?
Firstly - fantastic work here Jan
I’m assuming there is a way to access the public methods such as scroll and get etc from the calling page - but I couldn’t seem to work out the syntax. Any pointers mate?
Cheers
Its only possible to call the methods from inside the callback functions. Like i showed here:
http://www.nabble.com/Starting-image-tf2668575.html#a7470781
Hi,
First off, thanks for a great plugin. Great functionality and nicely written
I had a need for an event when an animation started and when an animation finished and I couldn’t find a way to do it with the plugin as is (long story but it’s a complicated page which is using my own buttons on the page to trigger the animations).
I could do what I wanted by listening to ‘itemVisibleInHandler’ but that fires for all items in view. So I hacked in two extra events, onScrollStart and onScrollEnd.
You can see my patch here: http://www.kelvinluck.com/assets/jquery/jCarousel/jcarousel.patch or the changed file here: http://www.kelvinluck.com/assets/jquery/jCarousel/jcarousel.js
It would be cool if you could add this (or a cleaner version of it, like I said this was just hacked together) into the plugin code,
Cheers,
Kelvin
Since version 0.1.1, it’s possible to pass a hash for the callbacks:
itemFirstInHandler: { onBeforeAnimation: callback1, onAfterAnimation: callback2 }Check out the callback example.
Hi,
I did see that but somehow thought it got called for each item rather than once for the group. But you are right, it does exactly what I want and you can ignore my messy patch!
Thanks again for a great plugin!
Kelvin
Great little script! I would like to use the jcarousel for an infinite animation of thumbnails, that are scrolled automatically. I deactiviated the buttons and set the carousel to autoscroll. The problem for me is, that at the end of the itemlist the carousel returns to the start and begins once again. This looks a bit strange. It would be great when after the last the first item would be just appended and scrolled in the same direction without a visible return to the start. Is this already possible?
One other thing: I like the option autoScrollStopOnMouseover, but I would prefer an option, that only pauses the scrolling on mouseover but continues to scroll on mouseout.
1.) Thats not possible at the moment. Its on my todo-list but not done yet. A simple solution for this without animation is discussed here.
2.) I’ve updated jCarousel with a new option autoScrollResumeOnMouseout.
Thanks for the new feature and your lightspeed reaction
Do you have an idea when loop together with animation will be available as an option?
Don’t know (even if it will be integrated at all) since its a bit difficult working together with the dynamic content loading (ie. with ajax).
I mostly have jCarousel working with with text/divs instead of images, but I’d like to be able to use percentages instead of fixed widths. Is that an option? With fixed widths it works great … at least until I set the div inside of the li with an overflow: auto … then the whole div flows across. Another option was to explore the use of the fit2Box jQuery plug in so that I didn’t have to worry as much about overflow clipping, but I couldn’t get that to work either. Any guidance would be greatly appreciated. Thanks!
I haven’t tested it much but i don’t think it will work…
If you want some help, setup a test page and post it along with your question to the jquery mailinglist.
Great piece of work! Looks great and is running smoothly…
The only challenge I have is:
I want to replace the whole image list with an Ajax call from outside jcarousel while jcarousel remains up and running, i.e. I will not use the add command but simply reload the whole … .
This isn’t working so far: I’m receiving a JS error “Invalid argument” after replacing the image list. Is there a way to initialize jcarousel newly?
Thanx
Just apply jCarousel to the new object:
jQuery(theNewListObject).jcarousel();Can’t seem to get it working on jquery 1.1… Works fine on the previous release though.
By the way, thanks for this. It has really come in really handy.
jQuery 1.1 has some api changes, so i have to fix some things, escpecially the event binding.
Thanks for your fast answer - although it didn’t really fix my problem.
I want to use jcarousel in info windows from Google maps. I generate a set of markers which open an info window when you click them. When you click the next marker the info window with fresh code appears on the next marker. I receive HTML (the …) via an Ajax call:
function createMarker(point) {
GDownloadUrl(’get_images_by_bb?’+ getVars, function(data, responseCode) {
marker.openInfoWindowHtml(data, {onOpenFn:start_jcarousel()});
});
});
}
function start_jcarousel() {
jQuery($(”mycarousel”)).jcarousel({
itemScroll: 2,
scrollAnimation: “fast”
});
}
But only a list with images is visible. Somehow the info window and jcarusel are out of sync. When I invoke start_jcarusel manually aftwerwards, jcarusel becomes visible. Also putting the
jQuery($(”mycarousel”)).jcarousel({
itemScroll: 2,
scrollAnimation: “fast”
});
directly after marker.openInfoWindowHtml(…) without using the onOpenFn event in create_marker didn’t help: The first info window with jcarusel being displayd correctly went fine, but when you click on the next marker it was without jcarousel…
I’m not very familiar with the google maps code plus the comments are not the best place for discussing such things. Please post to the jquery mailinglist. Thats the better place for that.
Sorry for posting details, but problem is solved: the google option “onOpenFn” is buggy on info windows opened by markers. Use info windows opened by the map instead (map as constructor).
BTW: Is it possible to have additional buttons that make bigger jumps (e.g. 10 pics at a time)?
Sry, not with current version. But i’ll keep that in mind for coming versions…
hey Jan, love jCarousel. Any plans on making it work for jQuery 1.1? Or should it work with it?
Thanks,
Fish
Nevermind! I see the new version will work with 1.1. AWESOME! Thanks
Hi Jan,
I’m trying to load 2 carousel’s on a single page from separate dynamically loaded data sources.
It appears the loadItemHandler in your dynamic load example can only handle a single data source (itemList) and that your 2 carousel example uses only static loading.
How would you recommend doing this? Is there a way to add the data source to the constructor?
Thanks for your fantastic work on this plugin.
Duncan
That is possible. Maybe you placed two carousel with same id attribute on your page. If you can’t fix it, post an example page to the jCarousel forum.
I am having a problem in Safari 1.3.2 when using the custom button handlers. When the site loads it does not show any of the images. When you click the next button it shows the images and moves to the next set just as it should andfunctions correctly from that point on. A remedy I found to this problem was setting the startItem to something other than 1 so that the scroll method is called.
So it seems to me that when the scroll method is called something happens that makes the images show up correctly. This problem is only occuring in safari. It works ok in the other browsers.
Any insight on this issue would be greatly appreciated.
Thanks for such a great plugin, it was just what I was looing for!
I dont’t have any problems with Safari here. Please post that question along with an example page to the jCarousel forum.
Hi Jan,
thanks for a great plugin.
I have some suggestions for next version.
1. It’s a very inconvinient that I cannot start and stop autoScroll with some external controls. There are no public functions for this purpose an I need to modify jCarousel source… I woud appreciate if you implemented some simple public wrappers for your private function as startAuto, stopAuto and disableAuto. And certainly something like enableAuto with “time” as parameter;
2. Next idea is also connected with AutoScroll. It would be nice if at the end of the itemlist the carousel does not return to the start but begins to scroll backward… As it was bounced from the right border…
3. My last suggestion is connected with implementation when data is loaded dynamically. If we have a very long list of data and we would like to start not from the very beginning but from some element in the middle - the current implementation of jCarousel will load all items from the first to “itemScroll”… It makes no sense for dynamically loaded data. With “loadItemHandler” I implemented a variant when instead of real data I provided jCarousel with some “fake” items and then loaded real items when it needed. But it’s much easier to implement such a functionality inside jCarousel. I think that this modification could be useful not only for me. If you would like to look at my implementation I would be pleased to send it.
Thanks again for you great work.
Hi Jan,
thank you very much for sharing this plugin. We are studying the tech specs for a new website and were thinking of doing it in flash, until i found your plugin. Now i had no idea such thing was possible in javascript. So really, thanks a lot.
Small question : would it be possible to have a continuous sliding whenever the mouse is over one of the arrow buttons ?
thanks a lot once again,
Alexandre
Hi,
Great script but it simply don’t work on Opera ( tested on v9.10 on win XP).
I’ll try to find what is the problem ( probably a css issue ) .
If any of you already fixed this it’s more than welcome .
Cheers
@Dmitry:
1. http://sorgalla.com/projects/jcarousel/example_static_controls.html
2. I don’t like switching behaviour of the next and prev buttons.
3. Moved to todo-list…
@Alexandre Plennevaux
Moved to todo-list…
@sam
I fixed that. Please download it again.
Hi Jan,
Thanks for your answer.
But my first question was concerning starting and stopping AUTO-SCROLLING. I studied your examples and the source as well. And I do not see a possibility to start Auto-scrolling with the static controls. Only with initialization of jCarousel (something like autoScroll: 3). Maybe I wrong but I cannot find a way to start/stop it from outside….
Thanks,
Hi,
Potentially I may have hundreds of images to display in the carousel - I want to use Ajax to load them as efficiently as possible.
I’ve been experimenting with: http://prototype-carousel.xilinus.com/ which passes 2 parameters to request data: start and nb (number of results, ie: start=0&nb=5). Is it possible to do this with jCarousel ? Can you think of any other means of improving the efficiency of the load? preloading several images at a time (outside of the number to be displayed at any one time in the carousel) ?
Thanks
[...] Galleria at google code I saw a post where one user have integrated the Galleria plugin with jCarousel, a jQuery version of iCarousel on his site. It looks like it’s been done in a breeze, so if [...]
[...] 16) Riding carousels with jQuery - [...]
[...] Riding carousels with jQuery - is a jQuery plugin for controlling a list of items in horizontal or vertical [...]
[...] and Fade jQuery plugin used to get the fade and highlight effect. Carousel jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical [...]
[...] 16) Прокрутка списков с помощью jQuery [...]
[...] community means there are lots of handy plug-in libraries out there to take care of your tabs, carousels and fadey bits… (If you’re a HTML/CSS person and you don’t know what all this [...]
[...] are few carousel-effect plugins for jQuery out there, of which the most popular seems to be jCarousel. However the requirements - a skin css file, jCarousel’s own css file, etc. - are a bit much [...]
[...] the creation of a new agriculture site I recently discovered the jCarousel jQuery plugin. This creates a flexible little photo gallery that can be completely styled to match [...]