View Full Version : Ultimate Fade-in slideshow - want to fade-in but not out

10-31-2007, 12:41 PM
1) Script Title:
Ultimate Fade-in slideshow

2) Script URL (on DD):

3) Describe problem:
Any simple way to change to code so the images fade-in but remain on screen without fading out. I'm trying to find an alternative to a huge size animated GIF file where parts of a GIF image are transparent and then different layers are added cumulatively.

Alternatively is there another script that lends itself to this effect-- placing overlapping images on a screen in sequence but not removing them as new ones are added? I like some sort of transition. I want to keep the size of images down so I don't want to duplicate parts of the image as new images are added.

I don't care about the html link feature- I already made a change to the code to use an image map instead.
Also I took out the looping so it's ok not to loop back to the first image. I'm happy if it just brings in each image and stops at the last one.

10-31-2007, 03:57 PM
Well, the way that U-Fade works is by fading the image in, not out. But it also rotates the images, and is meant for solid images with no transparency, that's why it looks like the other one is fading out.

The problem of a huge animated .gif won't go away by simply creating it as a slideshow, at least not in most cases. The resultant train of images will almost always be of a much larger byte load than the animated .gif is. If you actually have your images and they aren't of a much greater byte load than the animated .gif, they could be used to make a new animated .gif that is much smaller than the huge one that you are worried about.

11-02-2007, 02:36 AM
Thanks John. You're right I should have said I didn't want the images replaced -- I didn't really mean I wanted to stop "fade-out". But now I'm pretty disappointed because I find the animated gif programs so very cumbersome to work with. I was really hoping I could achieve the transition effects I wanted with one of the Dhtml slideshow programs adding images cumulatively without replacing prior ones thereby reducing unnecessary duplication of images that I want presented in every frame.

11-02-2007, 04:32 AM
I use Animation Shop. While saving an animated GIF image in that program, it allows you save only the portions of the frames that have changed. This results in some savings, but not as much as one would think. Even saving only what has changed, you need a portion of the image that's transparent, same as if you had separate images. It's still usually way less bytes than separate images though.

11-02-2007, 04:49 AM
Thinking about this a bit more, say you have 10 frames/images and you want a fade transition between them. In an animated GIF, that could end up to be about 1000 frames or more. So, if that is what you are talking about, you could just make up your 10 images, it wouldn't matter if all 10 had everything on them and didn't rely upon keeping any part of the previous image, it would still be a big byte savings. You could save even more if only a portion of each image changed, and it was always in about the same spot. You could have the full image as a background image for the entire show. But all of this depends upon the images. Explaining it here like this might just be getting your hopes up. I would have to see the images or the animation to really tell if using the slide show would save anything or not.

11-02-2007, 06:44 PM
yes that's exactly what I have been doing -- avoiding all those gifs for the transitions-- and yes I did save huge amount of bytes this way. But I still felt I could save more if there was a javascript that allowed images to remain on the screen rather than disappearing when a new image appeared. The effect I am seeking is a large image of multiple overlapping pictures spread over a large transparent field where some images fade into view incrementally until the whole field is filled with pictures.I achieved this effect with this javascript but only by duplicating images multiple times. I take it there is no simple way to alter the code to avoid removing the earlier pictures as new ones appear.

11-02-2007, 08:11 PM
I do have a script that all it does is fade images in or out or both, your choice. To carry out your idea using it, you would probably need to position each image on top of the other absolutely within a relatively positioned container division. That much is pretty straightforward css. Here's the script:


It was introduced here:


You would need to set up a schedule somehow, a repeating interval (the setInterval method) that increments the image to be faded in with each loop, would probably be best, for fading in each image. If you need help with that or with seeing how to use this, let me know. If I had a link to your images, I could make up a working demo when I have the time.

11-02-2007, 10:57 PM
I'm so very grateful. I'm going to try it out. I'll let you know if it works or I need more help.

11-06-2007, 10:32 AM
I sort of lost track of how this thread was going, did you PM me about it asking for a demo? Oh yeah, I just checked and you did. Are those all of the images? Do they have to be so big?