jCarousel 0.2.0 Beta
Posted in Javascript by Jan on May 7, 2007 at 20:56h It has been a long time since i’ve last updated jCarousel. But here it is: the first beta of jCarousel 0.2.0, a complete rewrite of the plugin. I’ve tried to make it more flexible and to cover most of the features requested on the mailinglist.
» Download » Documentation & Examples
Please note that this is a beta release. If you find bugs, please report it here.
The new key features are:
-
Flexible carousel dimension
You can now create carousels with flexible dimensions. You can set the width/height of the whole carousel to percentage values or have items with different dimensions. It’s also possible to set the visible items to a fixed number and let jCarousel calculate the width/height of each item depending on the current carousel dimension.
-
Adding and removing items at runtime
Having large lists of items sometimes slows down the carousel. Now its possible to manage thousands of items with jCarousel by only loading the visible range of items and remove all out-of-range items.
-
Support for custom animation effects
You can now run your carousels with custom animation effects. Just register easing effects to jQuery and pass the name as option to jCarousel.
-
Support for circular carousels
jCarousel has no full support for circular carousels since it would bloat up the code too much. But it provides some methods and options to simply implement it. Just check the “Circular carousel” example delivered with the jCarousel package.
-
Reloading of dynamic content
It is now possible to reset the carousel and re-initialise it. Thats useful if you want to show search form based results with a carousel.
If you have already worked with jCarousel, you should read the documentation carefully and check the examples because there are a lot of new and changed api methods and configuration options.
48 Responses to 'jCarousel 0.2.0 Beta'
Leave a Reply
- Create a page where i can see your carousel in action
- Post it to the jQuery Mailinglist (Add the word "jCarousel" to the subject, so i can filter out mails regarding jCarousel).
Thanks so much for your hard work on the JCarousel project.
It’s a lifesaver.
Thanks very much for your work on this project, I’ve used it a few times now and its looking even better now.
One feature (hack) I’ve wanted to do is to remove the scroll animation to the start item when the carousel is initialised, so it just starts there instead of scrolling. Any clues how I could manage this (if at all!)?
thanks again
Could you explain that more detailed. Please post to the jQuery mailinglist, maybe with a link to an example page.
Thanks for the new version and the option to have a circular carousel! That’s the feature I’ve been waiting for. I used your circular example to construct my own. It works fine in firefox 2, but in Internet Explorer it just makes one complete round and after the last item it stops with an error in the status bar of the browser. (’url’ is null or no object)
Did you also experience this?
How can I also use links in the definition of a circular carousel? I see the “var” definitions but I have no idea you to define the a href, too. Any suggestions?
The blog comments are not the best place for discussing such issues. Please post your problem (with a link to your page) at the mailinglist so we can sort out your problems.
I’m trying to use your beta 0.2.0 with jcarousel inside a table. Doing this corrupts the table layout in IE 7. I have not tried it in other versions of jcarousel. Below is a minimized example:
jCarousel Fails i IE 7.0
jQuery(document).ready(function() {
jQuery(”.jCarousel”).jcarousel({
visible: 1,
scroll: 1,
auto:5,
animation: “slow”,
wrap: ‘last’
});
});
My table
Col 2
Line 1
Line 2
Line 3
Line 4
Line 5
Col 3
The example didnt show correctly in this blog. I have posted it in the jquery discussion group
/Jens
I’ve answered you there…
hey,
i need an example of a circular that pulls the list from the html list.
very nice script
bug… well maybe not so much a bug as a wierd accurance. i am using jcarousel to display an entier pages rather then just images (see http://www.panic.com/coda/ for the effect i am after). i have found that the program takes over every list inside the div not just the first list. so nested lists get changed as well.. needless to say this is undesiered in my particulare case.. i have come up wiht a fix though and i thought you might know of a better fix.
change line 101
//if (e.nodeName == ‘UL’ || e.nodeName == ‘OL’) {
// ul only
if (e.nodeName == ‘UL’) {
chane line 124
//this.list = $(’ul,ol’, e);
// ul only
this.list = $(’ul’, e);
change line 150
//var li = $(’li’, this.list);
// this prevents jcarousel from taking over all the lists
var li = $(’.jcarousel-list’).children(’li’);
now i can safely use ol inside the ul inside the main div..
to me this seems sloppy and that there should be a better way to prevent jcarousel from using all li elements inside the outer div not just the li elements in the first ul.
please let me know if you can come up with a better solution
thanks
david
nevermind i think i found the perfect solution for me.. i took out lines 95 to 12 and replaced it all with just
this.container = $(e);
this.list = $(’.jcarousel-only’);
this now only works if you set the list you want changed to have the class jcarousel-only and it only works if you use a div.
line 146 was then changed to
var li = $(’.jcarousel-only’).children(’li’);
that way only its children and not nested lists are used.
awsome program.. tweaking this has saved me countless hours it would have taken to write from scratch.
-David
Nice work! I’ve implemented your code here:
http://www.myhomefront.tv/clients/gephardt/build/flicker.html
Only trouble is I’m getting a flicker in FF as the photos transition. Any way to get rid of that?
Great tool. Thanks for all your hard work. I’ve added to a site i’m working, and it has saved me a ton of time in coding.
One thing I did notice with circular wrapping is a flicker effect when clicking next on slow(er) machines. The way the li elements are added and removed appears to be the issue. The flicker effect doesn’t happen when clicking prev because the li elements are added to the beginning of the ul, and not appended to the end like when clicking next.
I noticed that in Opera 9.21 for Mac, when closing the Thickbox 3 window, it leaves a white rectangle where the window appeared and the overlay is still partially visible on the page. This doesn’t happen in the Thickbox 3 examples on Cody’s site so something is amiss in the implementation with jCarousel 0.2.0 Beta. With that said, excellent work on this script!!!
Hi,
Is there a way to use images of multiple dimensions ?
Nothing really fancy, I need to display horizontal and vertical images, which all have the same height (so I have two possible width)
I’d be glad if someone could share a hint
Thanks for the great script !!!
Mathieu
@hcabbos: Yep, same on Opera 9.21 for Windows. I have to look deeper through it, could not find a quick fix for that. Maybe the jQuery mailinglist has quicker answers for you…
@MathieuMa: Thats one of the new key features mentioned in this blog-post (”You can set the width/height of the whole carousel to percentage values or have items with different dimensions.”). Just use images with different dimensions…
Excellent script, Jan!
Quick question: Is there any way to create a carousel with grid-like dimensions, e.g. a 3X3 carousel, showing/scrolling 9 items at a time?
I thought I remembered a previous release where this was possible.
Thanks in advance, and, once again, great work!
Yes, ihe items can contain any HTML you want. Just put 3×3 grids with images inside the <li>’s.
Ok, I think I found a bug to.
The ’scroll:’ configuration aprameter has no effect in camino ( Based on mozilla) and safari 2.0
And in Safari 2.0, there are no rounded corners.
Just to let you know.
btw, great work!
Frendly greets from Belgium
It should work. I’ve tested it in both browsers. If you have problems, just post at the jQuery mailinglist.
The rounded corners have been done using -moz-border-radius which only works in mozilla browsers.
I would like to have items scroll in from the left rather than from the right. Is such a thing possible?
No, sorry. Not with jCarousel at the moment.
Hi There! What a wonderfull project! I’m using it at the moment on a project as a navigation device. There is one thing I can’t get right. If i go to a page. like contact.html or whatever, then I want de carousel to go to there and stay there when I reload the page.
Is this possible?
This is the url: http://www.tbdesigns.nl/macrepair/new/index.php
Greetz Tim
Check the Carousel with custom start position example.
Hi Jan, I can see some possibilities, but I have trouble integrating my system. I’m using php to link to my pages. like this:
index.php?p=contact
In the caroussel the contact icon has number 5. In php I ould do something like this:
if($_GET['p'] = contact){ caroussel_id = ‘5′;} -> now the caroussel has to know where to start.
How do I do something similar in Javascript?
Thanks allready man!
Greetz Tim
You can use the getUrlParam Plugin.
Great tool, shame your download fails to open in Windows, i have tar unpackers but it gets killed on opening the headers!
Could you provide a zip? or a text document online in which the poor folks whos school organisations cant afford macs can copy and paste?
Try this.
Hello,
The scroll seems to work randomly with Safari 3.0.2 (on a Mac).
When I look at this page :
http://sorgalla.com/projects/jcarousel/examples/special_start.html
The carousel is sometimes loaded correctly and fully working.
And sometimes, the images do not appear in the carousel, and an horizontal scroll appear on the page. Resizing the Safari window make the scrollbar disappear, but the carousel is still empty and not functional (clicking on the arrows doesn’t do anything)
The Safari Javascript Console do not show any error.
Hope this helps,
Thomas.
Hello,
I just want to say thank you for an excelent script!
You can see it working on my webpage at http://www.bmxaction.net
greets wessite
Example with thickbox is done pretty well (file: special_thickbox.html), but it’s npt degradate Gracefully
If we turn JavaScript off, browser will show nothing!
Now look what i’ve done:
I took UL list from file static_simple.html
then i added this script:
jQuery(document).ready(function() {
jQuery(’#mycarousel img’).each(function(i){
var url_m = this.src.replace(/_s.jpg/g, ‘_m.jpg’);
var li = this.parentNode;
var a = document.createElement(’a');
a.setAttribute(’href’, url_m);
a.appendChild(this);
tb_init(a);
li.appendChild(a);
});
jQuery(’#mycarousel’).jcarousel();
});
Now it works with thickbox and degradate gracefully.
But i really don’t like the way how I did it..
I am newbie in jQuery.. so maybe somebody can remake my code, or just tell me that there is no any better solution.
I want to scroll to the next (+1) and the previous (-1) element with a external javascript function. How can I do that?
hi.
i have a problem to put pictures with jcarousel in a table.
Here is the code:
/**
* Overwrite for having a carousel with dynamic width.
*/
.jcarousel-skin-tango.jcarousel-container-horizontal {
width: 50%;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 100%;
}
jQuery(document).ready(function() {
jQuery(’#mycarousel’).jcarousel({
visible: 4
});
});
Sorry for my english, the code dont work put each picture under of each one.Is for the tag i dont know how fix it.
i tried put all the picture in one tag but it dont work, it dont run the scrip, show the without the jcarousel script.
thank you
thank you.
sorry the code werent display here .. iwill put this in the jquery disscut section.
thank you
Hi Sr
it’s work fine .
i aprecied your very nice work
can you tell me how i can displaye 2 line in jcoursel ?
Thank you.
Hello,
I’m trying to have a standard scrollbar along with the next/previous buttons. I can do this by just using overflow-x:auto. However, how do I modify the next/previous buttons to work WITH the scrollbar, in other words, have the scrollbar move accordingly when the buttons are used?
Thank you.
Hi Jan,
I’m implementing your jcarousel and it works perfect. I found out that it’s not possible (yet) to use it together with the latest jquery (1.2). In my case I also use other plugins who might need a newer version.
Do you expect to update jcarousel for jquery 1.2 soon?
Cheers,
Wouter
Thats due to a bug in jQuery 1.2. The developers promised to fix that bug this weekend.
Hello,
Really nice plugin, it’s work good on firefox and IE7 but not on IE6.
I had a bug on the next and previous button, the height isn’t applied.
example of my jcaroussel
http://www.hybridbears.com/jcaroussel/index.htm
Thank you
I love your plugin, and have used it several places - dare I ask how the 1.2 patch is coming? Your fans are waiting!
:)
Is there an easy way to reverse the direction of the carousel? Start at the rightmost item and click left for more?
Hi,
Just a quick question… has anyone else had any problems with this within Safari v2.0.4.
The application returns ‘Null value’ when using ‘wrap:circular’ but not for any other value.
regards, ject
@Sarah (re: FF flicker problem)
I’ve found that adding ‘e.hide()’ before ‘e.remove()’ in jquery.jcarousel.js (line ~411) seems to solve the flicker problem.
- Jason
I am attempting to use the new percentage based dimensions on a vertical carousel and not having much luck. I assumed (incorrectly?) that I would adjust the css for ‘.jcarousel-container-vertical’ and/or ‘ .jcarousel-clip-vertical’. It works with fixed values but not percentages… any advice?
Whenever I go to the MLB site I get this message:jCarousel: No width/height set for items. This will cause an infinite loop. My browser is Safari, and I’m on an iMac Power PC G4. What should I do?
thanks this is nice plugin and jquery is ace.
When I go to http://www.mlb.com on my Mac, I get the error message “JCarousel: No width/height set for items. This will cause an infinite loop.” I don’t know much about computers .. does anyone know how to fix this and if so, could you let me know the steps I need to take. Thanks so much for any help!
Hey Sid, I am also getting this JCarousel error message lately when I’m using Safari browser and don’t know how to fix it………please help us!! I am currently using Firefox browser without problems but would prefer to use Safari!