JCarousel JQuery plugin, some help needed...

Question

The next button is enabled even though there are no items in the carousel, and it seems as if JCarousel thinks it has infinite items, because when I click the next, it actually scrolls.

I want to disable the 'next' when there are no items in the Carousel.

The Carousel works perfectly when there are items in the carousel btw! I have absolutely no experience with JQuery, only some javascript.

This is what I have:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll:4

    });
});

I think I should use initCallback somehow, but as I said, I have no experience with JQuery at all. BTW here is all JCarousel parameters and I think, how to set them.

Hopefully somebody out there will help me.

Thanks

Answer 1

I didnt ask this in your other questio but i will now - if there are no ads that would imply you have a completely empty ul to begin with, so why even have the ul and why ever call jcarousel on it?

I have a tought that you are doing this for layout consistency and if that is the case then ok, but then shouldnt you have some default content for your ad box? otherwise youll get the controls and a blank div which i cant image would look "nice".

I can help you either way but id like to give a good solution which may or may not be the solution youre actually asking for ;-)

For example to completely ommit the jcarousel call if there are no ads you could do something like:

$(document).ready(function(){
  var carouselList = $('#my-ad-carousel li');
  if(carouselList.length > 0) {
    carouselList.jcarousel({scroll: 4});
  }
});

or replace it with a single default ad:

$(document).ready(function(){
  var carouselList = $('#my-ad-carousel li');
  if(carouselList.length > 0) {
    carouselList.jcarousel({scroll: 4});
  }
  else{
    carouselList.replaceWith('<img src="/path/to/some/image" />");
  }

});

It all depends really but im not sure simply displaying completely disabled arousel is a good path to take.

Answer 2

I believe you're correct in that initCallback is what you want. You'd want to put some sort of test to see if the list has any items in it, like:

initCallback: function(carousel, state){
    if($(carousel).find('li').length == 0){
       $('#next').attr('disabled', true);
    }else{
       $('#next').attr('disabled', false);
    }
}

You also may want to check out the buttonNextCallback and buttonPrevCallback carousel functions, which would again allow you to enable or disable the next and previous "buttons" if the current li is the :last or :first, respectively.