cycle-initialized event fires before autoheight / calcSentinelIndex finishes

[sebheg]

Hi,

first I would like to thank @malsup for this great plugin! After playing with it for quite some time, I found that the 'cycle-initialized' event fires BEFORE the autoheight setting is applied - i.e. if you give your cycle-slideshow the option autoHeight: 'calc', the 'cycle-initialized' event will fire slightly before the height is calculated and applied to the container.

That causes problems when you are try to apply actions which effect the height of the slideshow after initialisation of the slideshow...

One fix would be to introduce a new trigger('initialized-autoheight', ...) that fires events as soon as the initial height calculations are done.

Thanks again, Mike - great work!

[attheshow]

Same issue here. I'm trying to adjust the margins on the top of my prev/next buttons on a carousel based on the final height of the carousel. There doesn't appear to be a useful event for me to tap into though.

[malsup]

Is this an issue because you have code that listens to cycle-initialized but you need that code to run after the autoheight logic? If so, can you listen to cycle-post-initialize instead?

[sebheg]

Yes, that is exactly the case with my code. I am trying to wait for the autoheight: 'calc' logic to finish doing its math and based on the height of the slideshow container I would like to align other elements. Hence I need to wait for the autoheight logic to be finished. I will check out the cycle-post-initialize event and comment on this later on. Thank you Mike!!

[sebheg]

Mh, I think it does not work... Here's my code:

$('#teaser-slideshow').on('cycle-post-initialize', function(e, o) { console.log("event cycle-post-initialize: " + $('#teaser-slideshow').height()); }) $('#teaser-slideshow') .cycle({ fx: 'scrollVert', swipe: true, sync: true, speed: numAnimation, pauseOnHover: true, slides: '> div', autoHeight: 'calc', easing: 'easeInOutExpo', paused: true });

It gives me a height of 0 which is not the expected value... Maybe I am doing something wrong?!

[attheshow]

Nope. cycle-post-initialize wasn't late enough for me either. The height of the sentinel was returned as null in my function.

[wlanni]

I'm running into the same thing. I've tried with cycle-initialized and cycle-post-initialize, and the height of the slideshow being returned is 0.

[sebheg]

I have not found a fix or workaround to get this issue fixed - if anyone has an idea, please, step forward :+1:

[malsup]

If you have async content in your slides (such as images) and do not have attributes or style rules on that content then cycle has no way of determining the content's size until it actually loads. One approach to this problem would be to use C2's image loader capabilities via the data-cycle-loader attribute. Another approach would be to trigger a 'resize' event when the window 'load' event fires. A third option would be to delay initialization of the slideshow until the content has loaded.

[wlanni]

Hey folks,

You may be running into this with YouTube videos. I had to rewrite the Cycle2 Video plugin to work with iFrame embeds on our specific set up, as our content owners aren't exactly savvy, and what they've been trained in is grabbing the embed code. So, in order to start and stop the youtube video when the slide changes, I needed to load in the asynchronous youtube functionality to capture the player to pause and play. This allowed me to also set up a youtube onReady event. In that onReady event I trigger a $(window).trigger('resize'); which then has the autoresize function correctly.

[LouTerrailloune]

For people still looking for a solution, the problem here is that the calculation of the sentinel is done after everything is initialized (setTimeout( onResize, 30 );) so the only solution I've found is the ugly:

$("#my-slider").cycle({
    ...
});

setTimeout(function(){
    // do your personnal calculation here, the slidershow has the correct height
}, 35)

Another solution is to calculate yourself the height of the slideshow before running it.

[fuzzywalrus]

Thanks to wlanni, I used:

$(window).load(function() {
    $(window).trigger('resize');
});

I'm using data-cycle-auto-height="container" and it seems to work, it isn't pretty but it saves the day, and fortunately all the slides are below the fold the content shift is negligible

[dasakeem]

took me a while to figure this out, but the problem resides in calcSentinelIndex() within jquery.cycle2.js. if your slides are set to 100% height via css, this function will always return 0 and therefore the first slide will be used as sentinel-slide ;)

[pholthaus]

Thanks to wlanni, I used:

$(window).load(function() {
    $(window).trigger('resize');
});

I'm using data-cycle-auto-height="container" and it seems to work, it isn't pretty but it saves the day, and fortunately all the slides are below the fold the content shift is negligible

I'm also suffering from this behaviour. Where exactly do you put this workaround?