Thursday, August 1, 2013

jCarousel button not working in Chrome / Safari

If you have problems with the prev and next button not working in Chrome/Safari, make sure you include jcarousel after jquery and after the css file. The main issue that solved my poblem was to go to my jcarousel file ( Did not use the minimum version ) and comment most of the following.

if (!windowLoaded && $jc.isSafari()) { this.buttons(false, false); $(window).bind('load.jcarousel', function() { self.setup(); }); } else { this.setup(); } The only thing you should keep is this.setup(); Now go to the place after your jcarousel include that should contain something like the following script. function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('onclick', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('onclick', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; $.jcarousel.windowLoaded(); jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 0, scroll: 1, wrap: 'last', itemFallbackDimension: 300, initCallback: mycarousel_initCallback }); }); And add itemFallbackDimension: 300 to the last function. The last option you could try is using jQuery.noConflict() to solve your problem. You can also go to your jcarousel file and look for a value of something like this.list.css(this.wh, wh+100) + 'px'; and add in a replaced value of 3000 for example so that the width of the ul tag is not too small and will accommodate the appropriate amount of pictures.

No comments:

Post a Comment