Question

I’m trying to use jScrollPane with the plugin Cycle2 but it isn’t working as expected.

The following images are the cycle-caption element from the Cycle2 plugin with my dynamic content from each slide (data-cycle-title).

So, I’m trying to add a scrollbar using jScrollPane. OnLoad, it works as expected, but as soon as it cycle, the scrollpane gets lots and when gets back to the first slide, it shows as on the second image:

So, the code I’m using is the following:

$(window).bind('load',function(){
    $('#text').jScrollPane(
        {
            verticalDragMaxHeight:20,
            verticalDragMinHeight:20,
            animateScroll:true
        }
    );
    var api = $('#text').data('jsp');
    $('#slideshow').on('cycle-after',function(e, opts){
        api.reinitialise();
    });
});

The structure of the slideshow I think that it’s not relevant, since it is the basic structure with a caption template, etc.

Please, I really need this to work! 🙂

Answer 1

I managed to get it to work with a little dirty workaround. Posting here so that if someone encounters the same problem can get it working!

$('#slideshow').on('cycle-after',function(e, opts)
    {
        setTimeout(enable_scroll,5);
    }
);
function enable_scroll(){ $('#text').jScrollPane(settings); }

The setTimeout is the key!

Hope it helps 🙂