How to make slider-content fade-in/-out with each slide

Hi Edwin, you’ll have to use a custom slideshow script to do this. Check out this thread on animating Meteor Slides captions for a simple example, or this post on jQuery Cycle text animation for a more in depth example.

Hi Josh,

Thank you so much for your reply.
I’ll get into that later this week.

Thanx again and take care!

Edwin

You’re welcome, let me know how it goes!

Hi Josh,

Looks like I’m heading in the right direction, but there’s still some fine tuning to do (https://www.schenkz.nl/voorbeeld-pagina/):
– I can’t get the text boxes (.slider_content) to display long enough
As far as I know this must have something to do with setting the fade speed and/or play interval, but I haven’t got a clue on how/where to do that.

Any suggestions?

So far I’ve altered the code in the slideshow.js like this:
—————————————————————-
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout – ($slidespeed*2);

// Setup jQuery Cycle
$j(‘.meteor-slides’).cycle({
before: function (currSlideElement, nextSlideElement) {
$j(currSlideElement).find(‘.slider_content’).delay(500).fadeIn(1000).fadeOut(500);
$j(nextSlideElement).find(‘.slider_content’).delay(500).fadeIn(1000).fadeOut(500);
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: ‘#meteor-next’,
pager: ‘#meteor-buttons’,
pagerEvent: ‘click’,
pause: 1,
prev: ‘#meteor-prev’,
slideExpr: ‘.mslide’,
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
——————————————————————

More help would be appreciated.

Kind regards, Edwin

I think I managed to come up with a solution by adding an extra delay between the fadeIn and fadeOut function:
——————————————————————
$j(‘.meteor-slides’).cycle({
before: function (currSlideElement, nextSlideElement) {
$j(currSlideElement).find(‘.slider_content’).delay(1500).fadeIn(500).delay(5500).fadeOut(500);
$j(nextSlideElement).find(‘.slider_content’).delay(1500).fadeIn(500).delay(5500).fadeOut(500);
},
——————————————————————–
However this only works the way I want after the first cycle.
Within the first cycle there’s actually no delay at all!

Any suggestions?

Thanx in advance! Edwin