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

Answer 1

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).

Answer 2

Just tested some examples linked from the jCarousel page on Chrome (Mac) and they sure worked for me.

Answer 3

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!

Answer 4

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();

Answer 5

I have the problem of jcarousel in Safari and Chrome when it loads in that's browsers the images are not aligned properly and all images are goes right to the main div of the jcarousel .

Is there is any solution to this problem

Answer 6

hi...

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....