Question

I am using a div to populate a ul/li list and then draw a jCarousel out of it.
So this works fine:

$('#mycarousel').jcarousel();

Here is the problem:

The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.

I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).

To get the jCarousel, I am using:

JQuery('#mycarousel').data('jcarousel') 

and it is returned as null.

How can I get the jCarousel to draw correctly?

Answer 1

Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api’s reload function after the wrapping div becomes visible.

a bit of effort was to actually get hold of the jcarousel instance.
so it was a two step process…

1. get hold of the carousel instance.

    var cInstance = null;
    cInitCallback = function(c){
        cInstance = c;
    };
   
   $('#mycarousel').jcarousel({
           initCallback: cInitCallback,
   
       });
   

2. reload the carousel on the show of the div

    cInstance.reload();