jcarousel doesn't work properly in Chrome

Question

in my code i am creating a ul li for the jcarousel ie its a list of data(ex. list of photo)

when the photo count is more than say 4 , the jcarousel enables horizontal scrolling so as to see next 4 photos .

PROBLEM: is when i run the code in chrome the horizontal scrolls remain disabled even if number of photos is more than 4, in other browsers it works perfectly..

heres the code which imports jquery file:

     function SetCarousel() {

            $.getScript('<%=Html.LibUrl("jplugins/jquery.jcarousel.pack.js")%>', 
function(result)
                {

                jQuery('#CarouselUL').jcarousel({
                    visible: 4
                });
            });

        }

i have tried refering .js file @ top of page(aspx) didn't work ..even made it worse

pls help

It's not a solution, but jQuery Roundabout is a totally more awesome plugin for carousels. Just sayin... http://fredhq.com/projects/roundabout/ — Alex Sexton, Jan 04 '10 at 08:12
It solved my problem. anyone having smae problem follow jsims281 solution...thanks man! — , May 11 '11 at 04:24
Just tested some examples linked from the jCarousel page on Chrome (Mac) and they sure worked for me. — , Jan 27 '10 at 01:52

score 15 · Answer 1 · answered Mar 02 '10 at 09:56

15

I fixed this on a site I was working on by commenting out code which specifies Safari; for some reason the fixes they put in appear to have become obsolete. I'm using jQuery 1.3.2.

Here's the code I stripped out:

jquery.carousel.js:around line 184

    /*if ($.browser.safari) {
      this.buttons(false, false);
      $(window).bind('load', function() { self.setup(); });
    } else */
      this.setup();

jquery.carousel.js:around line 858

            /*if (p == 'marginRight' && $.browser.safari) {
            var old = {'display': 'block', 'float': 'none', 'width': 'auto'}, oWidth, oWidth2;

            $.swap(el, old, function() { oWidth = el.offsetWidth; });

            old['marginRight'] = 0;
            $.swap(el, old, function() { oWidth2 = el.offsetWidth; });

            return oWidth2 - oWidth;
            }*/

Hopefully this fix will help you and others who come across the problem!

answered Mar 02 '10 at 09:56

jsims281

2,206
2
30
57

This definitely saved me from a lot of digging :) Thanks! – Jim Greenleaf Jul 13 '10 at 22:04
That's saved me oh la la :) Thank You – Aziz Oct 18 '10 at 23:33
i've just implemented jCarousel on a site where the carousel loads in a lightbox modal dialog (fancybox plugin), and I am facing issues on Safari only. I've tried this solution and commented out the browser sniff blocks, but no dice. I've found that when I right click the image in the carousel and inspect the element, the carousel starts working though. You can see it happening at http://www.truthaboutsurfacemining.com/Environment/WhenMiningEnds – Thiago Silva Mar 21 '11 at 15:42
Thiago, you might be better off starting a new question and referencing this one as it's pretty old now. – jsims281 Mar 22 '11 at 18:00

score 1 · Answer 2 · answered Nov 08 '13 at 14:00

In version 0.2.9 this worked for me.
I took the minified version and threw it through the http://jsbeautifier.org and changed the following on line 95

}, null !== this.options.initCallback && this.options.initCallback(this, "init"), !c && d.isSafari() ? (this.buttons(!1, !1), a(window).bind("load.jcarousel", function ()
{
l.setup()
})) : this.setup()

to

    }, null !== this.options.initCallback && this.options.initCallback(this, "init"), !c /*&& d.isSafari() ? (this.buttons(!1, !1), a(window).bind("load.jcarousel", function ()
    {
        l.setup()
    })) :*/ this.setup()

score 1 · Answer 3 · answered Jul 16 '10 at 01:52

1

I tried number 1 solution and it worked. Nice man, thank you very much. I just commented the lines:

/*if ($.browser.safari) {
  this.buttons(false, false);
  $(window).bind('load', function() { self.setup(); });
} else */
  this.setup();

answered Jul 16 '10 at 01:52

Jp Bassinello

11
1

score 1 · Answer 4 · edited Nov 19 '11 at 03:41

This is awesome my problem is resolved thanks jsims281

In my case i have used

jquery.jcarousel.min

and the code commented is line no 134 to 139

/*if(!q&& i.browser.safari){
            this.buttons(false,false);
            i(window).bind("load.jcarousel",function(){
                g.setup()
                })
            }else */ this.setup()
            };

and line no 470 to 484

 /*if(c=="marginRight"&&i.browser.safari){
            var d={
                display:"block",
                "float":"none",
                width:"auto"
            },e,f;
            i.swap(b,d, function(){
                e=b.offsetWidth
                });
            d.marginRight=0;
            i.swap(b,d,function(){
                f=b.offsetWidth
                });
            return f-e
            }*/

score 0 · Answer 5 · answered Jan 04 '10 at 11:12

I suppose you mean this jCarousel?

If yes, what jQuery version are you using?

Because this plugin hasn't had any updates for a long time now. Current version is 0.2.3 from April 07, 2008 and the changelog for this version says

Version 0.2.3 - 2008-04-07 Updated
- jQuery to version 1.2.3. Fixed
- (hopefully) issues with Safari

I recall this plugin having some problems with newer jQuery versions starting with 1.2.6 (today we are at 1.3.2 already).

Also you must be aware that the current version of jCarousel appeared before the first release of Google Chrome (version 0.2 came out on the September 08, 2008).

I use a hacked up version in production and it's working fine under jQuery 1.4.2. I didn't have to make any changes for Chrome and Safari to make it work overall, but the fixes described here have smoothed out the loading. You're correct that in general the plug in is kind of outdated and hasn't seen any updates in a long time. About time for a fork, I'd say. — JAL, Jul 16 '10 at 02:57

score 0 · Answer 6 · answered Oct 04 '10 at 18:56

very nice... jquery.carousel.js:around line 184

/*if ($.browser.safari) { this.buttons(false, false); $(window).bind('load', function() { self.setup(); }); } else */ this.setup();

jquery.carousel.js:around line 858

      /*if (p == 'marginRight' && $.browser.safari) {
        var old = {'display': 'block', 'float': 'none', 'width': 'auto'}, oWidth, oWidth2;

        $.swap(el, old, function() { oWidth = el.offsetWidth; });

        old['marginRight'] = 0;
        $.swap(el, old, function() { oWidth2 = el.offsetWidth; });

        return oWidth2 - oWidth;
        }*/

This is working very well.... Thanks....

score 0 · Answer 7 · answered Dec 02 '11 at 16:07

It seems only one condition left in version 0.28 and it causes delay in completing the setup

Based on Jsims281 (thanks Jsims) , I searched the minimized version of jCarousel v0.28 and found that line as following:

!m&&g.browser.safari?(this.buttons(!1,!1),g(window).bind("load.jcarousel",function(){e.setup()})):

should comment the above to be:

/*!m&&g.browser.safari?(this.buttons(!1,!1),g(window).bind("load.jcarousel",function(){e.setup()})):*/

jcarousel doesn't work properly in Chrome

7 Answers7