Cycle2 Initialization events not firing

Question

I'm using Cycle2 for a basic carousel. My slide items sometimes have a url in their data, so I have to use the Cycle2 api events to use that url when it is there.

My problem is that while the 'cycle-after' event fires fine, none of the initialize events will fire. So if my first slide has a url, nothing happens. This is my code:

pressSlideshow.on({
'cycle-post-initialize': function(event) {
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
},
'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var a = $(incomingSlideEl);
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
}
});

The first event never fires but when I scroll the slideshow the 'cycle-after' event works fine. I've also tried the 'cycle-initialized' event which never fired, and the 'cycle-update-view' event which only fired after scroll but not on initialization.

What gives? & thnx in advance :}

Cycle2 Events Documentation

Answer 1

I just had this same problem.

From the FAQ

Why doesn't the cycle-initialized event fire?

It does, I promise. But if you bind your event listener after it has already fired then you won't hear it. Double check that you're not binding too late.

You must bind the event before you run the cycle() init method.

Assuming that your set up your code like:

var pressSlideshow = $('.pressSlideshow').cycle();

pressSlideshow.on({
'cycle-post-initialize': function(event) {
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
},
'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var a = $(incomingSlideEl);
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
}
});

Do this instead:

$(document).on('cycle-post-initialize', '.pressSlideshow', function(){
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
});

var pressSlideshow = $('.pressSlideshow').cycle();

pressSlideshow.on({
    'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        var a = $(incomingSlideEl);
        var d = a.data('url');
        if (d !== undefined) {
            pressLink.attr('href', a.data('url')).show();
        } else {
            pressLink.hide();
        }
    }
});

Take note of the .pressSlideshow selector as yours could differ.

Cheers