Slide Show Stack Fade to White?

Although the owner of various and sundry slide show stacks, I am looking for a capability that I am not sure exists.

I would like the slide show images to dissolve to white, before the next image appears, rather than fading one image into another. The latter technique works fine when the images are all the same size, but the images tend to get distorted, to a greater or lesser degree, if they are not the same size. The worst culprit is unfortunately my latest acquisition, the RefinedSlider from the usually impeccable Stacks4stacks.

I thought that it might be possible to insert a white frame in between all the images, but of course that doesn’t work, because it gives equal weight to the white. It is a solution that would necessitate individual control of slides.

Wondering if anyone has any suggestions?

Thanks.

Unfortunately you’re too late to submit feature requests. That deadline has passed and RefinedSlider 2 has already been released. Other users appear to generally be pleased with the update. The free demo version provided has promoted lots of interest. The announcement can be found here:

You’ll come to find that just about every slideshow plugin available uses cross-fade transitions. Why? Because most sliders work on the basis of changing the opacity or z-index of slides as they transition. It’s very rare there is ever any ‘white’ behind the current slide to display; as one image fades out and another fades into view. Also I regret to inform you that you’re in the minority of users wanting slides fading to white - a majority of people want attractive slideshow effects and don’t want solid blocks of colour between slides. In other words there’s no money to be made in slideshows that fade to white between images!

It would not be difficult to set the transition speed in RefinedSlider to 0ms and use CSS code to apply animations on the images, in this instance fading the RefinedSlider images to white every 4.5 seconds, .5 seconds before the image changes:

.nivoSlider img {
animation-duration: 500ms;
animation-delay: 4500ms;
animation-iteration-count: infinite;
animation-name: fadetowhite;	

-moz-animation-duration: 500ms;
-webkit-animation-delay: 4500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-name: fadetowhite;

-webkit-animation-duration: 500ms;
-webkit-animation-delay: 4500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: fadetowhite;
}

@-keyframes fadetowhite {
from {
opacity: 1.00;
}    
to {
opacity: 0;
}
}
    
@-moz-keyframes fadetowhite {
from {
opacity: 1.00;
}    
to {
opacity: 0;
}
}
    
@-webkit-keyframes fadetowhite {
from {
opacity: 1.00;
}
to {
opacity: 0;
}
}

If you fiddle with the CSS animation timings, you should be able to get these to sync-up to the Javascript animations used in the slider. I was able to without much difficulty. But this does not take into account of someone hovering their mouse cursor over the slider to pause it or captions. And the fact the CSS and Javascript are running separately, eventually you’ll find one starts to outrun the other and they become out-of-sync. So I would not rate this solution highly, unless you’re building really simple sliders.

Really you need to start from scratch. Find a simple jQuery slideshow plugin that is not doing opacity or z-indexing on images. Something like this one. Paste it into my Builder stack and if you tweak the Javascript settings you can get the images to fade to white between each other. Example attached.

https://dl.dropboxusercontent.com/u/422052/FadeToWhiteSlider.rw6.zip

1 Like

As politicians are inclined to say, I misspoke. I meant RefinedSlider 2. I did in fact test it out before purchasing, but unfortunately only with images that were the same size. It looked great.

Thank you, Will, for your very detailed response to my post. Unfortunately, your advice is completely above my pay grade.

For the record, this is a link to what I perceive the problem to be. The theme is Foundation. The slider stack on the page is RefinedSlider 2.

https://app.box.com/s/qzf3ixgb3o0y9f49mhua0ge07irqxws1

Did you install the free Builder stack first which I stated was used in the test project, in my previous post? That is required to create drop-zones for your HTML, CSS and Javascript markup to go into and to call jQuery that is needed for the script to function.

1 Like

Thank you again for your response.

Realizing my mistake, I posted the following about a half hour after I posted that picture. I attempted to delete the picture, but Realmac was not cooperating.

“OK, I blew it again. It works after downloading the Builder stack. But it is still pretty inscrutable, at least for me.”

In any case, bottom line: I am a 68 year old artist, not a 25 year old geek. I neither have the time, or quite frankly the inclination, to engage in the level of programming necessitated by your suggestions.

I appreciate your support, as always. You are the best. But I would dearly love a solution to my quandary that does not require that I completely fry what is left of my rapidly diminishing sanity.