jCarousel 0.2.3
Posted in Javascript by Jan on April 7, 2008 at 17:17h The new version jCarousel 0.2.3 is out. I’ve bundled the latest jQuery 1.2.3 with the package and (hopefully) fixed the Safari issues.
19 Responses to 'jCarousel 0.2.3'
Leave a Reply
Do not post support requests for jCarousel here. If you need help for a problem:
- 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).
Just wondering if you’ve experienced any issues using the ‘multiple’ carousels within tabs - using 2 ui.tabs and placing a (unique) carousel in each tab.
The ’second’ carousel is seriously hosed. The UL never gets the correct width.
(I’ve posted in the Mailing List, but I thought I’d take a chance and submit this here as well…)
Great plugin, considering…way better than anything I’d ever be able to build.
_Bhaall
‘Forcing’ the width of the UL just after rendering the carousel does the trick, BTW:
$(’ul#first-carousel’).css(”width”,”1008px”);
$(’ul#second-carousel’).css(”width”,”1008px”);
I’ve been using multiple carousels within tabs - the way I handle it is that I don’t initialize a carousel on page load - I initialize it when the tab is displayed. That way, it all generates nicely.
Looking forward to trying out this version in the near future.
Hi, I identified an issue with Safari. In the “clipping” method, offsetHeight and offsetWidth return unexpected values. I debugged it and found that those attributes contained the width and height of the inner UL, which is bigger than the clip. That causes the carousel to behave quite inconsistently. For my use, I just hardcoded the values I needed, but you might want to find the appropriate attribute that work in Safari. My hack below:
clipping: function() {
if ($.browser.safari) {
// Hack for safari: hardcoded the values I needed…
return !this.options.vertical ?
611 - $jc.intval(this.clip.css(’borderLeftWidth’)) - $jc.intval(this.clip.css(’borderRightWidth’)) :
142 - $jc.intval(this.clip.css(’borderTopWidth’)) - $jc.intval(this.clip.css(’borderBottomWidth’));
}
else {
return !this.options.vertical ?
this.clip[0].offsetWidth - $jc.intval(this.clip.css(’borderLeftWidth’)) - $jc.intval(this.clip.css(’borderRightWidth’)) :
this.clip[0].offsetHeight - $jc.intval(this.clip.css(’borderTopWidth’)) - $jc.intval(this.clip.css(’borderBottomWidth’));
}
},
hello jan, please visit my jcarousel post on the jquery mailinglist: http://groups.google.com/group/jquery-en/browse_thread/thread/17c96aa965603ecd/d4d5d07e6955542b?hl=en&lnk=st&q=#d4d5d07e6955542b
thank you.
so where do we go for support questions if you skip the jquery mailinglist?
Hi,
Can I set so users just hover over the arrow button and the carousel will rotate? A line from the Doc’s says:
buttonNextEvent string “click” Specifies the event which triggers the next scroll.
I’ve tried to change the to ‘hover’ and similier wording but it dosn’t seem to work. What is the magic word?
Thanks
Check jQuery Docs: http://docs.jquery.com/Events/bind#typedatafn
Thanks for the info. I tried using events like ‘mouseover’ but it doesn’t continously scroll. The event is triggered once and then cant get triggered again until the user moves off and on the arrow.
Is there a way that continously moves the carousel until the mouse is moved off the arrow?
Thanks
No, that isn’t possible.
I think there is problem reloading the rotating carousel. The page has buttons which load another set of images when the user presses the button.
tab1
where tab1 is another array. This code simply changes the array and reloads the carousel. I works fine in IE but morzilla doesn’t reload the images. Is there a workaround ?
Thanks
Hey, this is a very nice script, btw
Thanks for this.
I have a question, I am trying to replicate this feature found here:
http://billwscott.com/carousel/carousel_spotlight.html
This is by the person who did the other article. I am trying to use static method, while including this. I have been playing with it for a while and cant seem to get something working. Any help would be much appreciated. Thanks
Hi, I want to use multiple carousels on my website too, BUT with different height and width values. A big one, and may be here and there some smaller ones. It seems that the height and width MUST be in jcarousel-item be set, no other class (which might contain the values) are accepted. I wish there would be an option to give the two values directly to the jcarousel method.
Because I need that working together with ajax load of contents, I’ll hack into the code this week. I’ll publish something if I was successful.
.oO( maybe I have something missed in the docs? )
Is there a way to remove an jcarousel or at least stopping the execution? I have a jcarousel running and overrides it someties with ajax stuff. After that I get “No with and height are set, Aborting” messages every 5 seconds or so. I guess the script tries to find the jcarousel DOM stuff, which is not there anymore. Is there an workaround?
See http://sorgalla.com/projects/jcarousel/examples/static_auto.html for how to stop autoscrolling.
Hi,
I am using circular carousel. It is giving a flickering effect in firefox 2.0 when i click on next button. Please advise me how to resolve this.
http://sorgalla.com/2008/04/07/jcarousel-023/#comments
Could this script be made keyboard accessible? Could the next and prev buttons be links rather than empty divs?
This is a great script. I am not the best with javascript so forgive me if this is a stupid question. I looked at your documentation and was trying to make the carousel bigger (wider) to display 5 thumbnails and cannot get it to display. In the HTML I added the following
jQuery(document).ready(function() {
jQuery(’#mycarousel’).jcarousel({
scroll: 4,
auto: 2,
wrap: ‘last’,
initCallback: mycarousel_initCallback
});
});
and in the CSS file I have widen the container but still no luck, it is still only showing 3 thumbnails.
HELP
Ok…I reviewed some other examples you provided and figured out that I needed to use the visible setting. Thanks for a great script!