REQ: Option for caption init

[ragamffn]

For images that actually slide into place, having the caption update at the end of the slide animation makes sense. However, for images that fade in, it would be nice if we could have the caption appear at the beginning of the fade in, esp. when sync is set to false...

This could potentially also allow for syncing of caption fades and image fades.

Edit to add that for fade animations the pager should also update at the beginning of the slide's fade in.

[malsup]

Try setting data-cycle-update-view to 1.

http://jquery.malsup.com/cycle2/api/#update-view

[ragamffn]

It's a bit better with that setting. The issue really is when sync is set to false and transition involves fairly slow fades - if update view could be set so that it would start at end of previous fade out/beginning of next fade in. Perhaps a '0' value to signify 'halfway through the transition', vs. '-1' for end of transition and '1' for beginning of transition...

[randalldon]

I have a similar issue and i was wondering if it's possible to add a delay to the caption fadeIn animation. Setting data-cycle-update-view to 1 works perfectly for the images in my scenario but the captions seem to get shown and then faded in. Ideally, i'd like to off-set the captions animating in.

[randalldon]

Any update on this?

[jamblo]

Echoing this one.

Need the new caption to only appear once its slide has loaded (and to have some control over the fade in/out speeds). Is there any way of achieving this?

Thanks James

[jvwrx]

+1 on this. Would love the ability to delay the caption for X milliseconds.

[jvwrx]

If anyone else is looking to implement this feature manually, I took the captions out of cycle2 entirely and ended up doing it with CSS animations. Here's the gist of it:

<div class="cycle-slideshow">
  <div class="item">  
    <img>
    <div class="caption">Just lovely</div>
  </div>
</div>

/* hide the caption */
.caption { opacity: 0; }

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* animate the caption when parent slide is active */
.cycle-slide-active .caption {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 2s;
}

Don't forget to add -webkit prefixes to keyframes and animation syntax. Good info on CSS3 animations at http://css-tricks.com/snippets/css/keyframe-animation-syntax/ and lovely pre-made animations at https://daneden.github.io/animate.css/