Discuss: Image transitions

Before you ask specific technical questions, please read or search through the existing comments, and any available documentation, to see if your question has already been answered.

You can also subscribe to this discussion (RSS 2.0)

1. RE: Image transitions

   Posted by Jen on 2006-03-06 at 14:38:44 (GMT)

   Hiya
   This is a great script - just what i was looking for!
   I'm afraid I don't know javascript very well, so was wondering if you could help me with something - I'm using the crosswipe (che) to expand an image in the centre of a page. I have reduced the duration to 1 but this still isn't quite fast enough. Reducing to 0.75 or something just makes the image pop up (far too fast).
   Is there a line in the js file that I can change to increase the speed of the animation?

   Thanks!
   Jen

2. RE: Image transitions

   Posted by Karl on 2006-03-06 at 17:18:02 (GMT)

   Hi there,

   Nice little script, though out of the box it seems to contain a small IE glitch which I can't seem to iron out: when an image has faded in, it quickly swaps for the previous one, just for a moment. It's as if the script says, "alright, we've finished loading, here's a quick flash-back to what you viewed before". Seems to work fine in Firefox (1.5).

   This doesn't seem to happen in the on-site example?

3. RE: Image transitions

   Posted by brothercake on 2006-03-09 at 22:22:50 (GMT)

   Is there a line in the js file that I can change to increase the speed of the animation?

   There is yeah, but I'd be very cautious. If you increase the speed then you'll start getting slower performance in lower spec devices, and exponentially so - a timeout of "0" would be much much slower than a timeout of "100", in an old machine.

   But if you want to play with this setting have a look for lines commented "copy and convert fade duration argument " in the script, and decrease the multiplier value (say, from 500 to 250) to increase the timeout speed.

4. RE: Image transitions

   Posted by brothercake on 2006-03-09 at 22:25:38 (GMT)

   it seems to contain a small IE glitch which I can't seem to iron out: when an image has faded in, it quickly swaps for the previous one, just for a moment.

   I've not seen that, no - could you post a demo online? (although I won't actually be able to look at it for a week or so, as I don't have access to a PC - but if you post a link I'll look at it asap)

5. RE: Image transitions

   Posted by Angela on 2006-03-24 at 11:44:05 (GMT)

   Congratulations for your excellent script. I am new to javascript and I was wondering if you could advise me on how to use your script in order to create an auto-loading and auto-running slideshow.

   Thank you

   Angela

6. RE: Image transitions

   Posted by brothercake on 2006-03-28 at 15:20:24 (GMT)

   that's not really what it's designed for - building a slideshow is a whole other set of issues, quite apart from the individual transitions.

   I suggest you have a look at something like this: http://scooch.gr0w.com/

7. RE: Image transitions

   Posted by frostedBill on 2006-03-29 at 02:47:15 (GMT)

   hey, these transitions are nice. I'm really digging them. I've implemented them into a little image by number viewer I'm making for a friend, and with a little tweaking I've gotten great results.

   the only problem I am having is that the duplication/fade process is overlaying other content that is intended to overlay the photo. I've tried setting the zindex to -2000 etc, but it seems like no matter what I try the duplication positions things at the top.

   do you have any advice how to either keep all the photos below or get 2 divs to always float above the transitions?

   thanks again!
   

8. RE: Image transitions

   Posted by brothercake on 2006-04-04 at 15:07:39 (GMT)

   The z-index of the duplication image is controlled with the "img.idupe" class in the transitions.css stylesheet - is that not having an effect? Are you sure that the other elements have positioning and the right z-index to bring them in line?

9. RE: Crossfade

   Posted by andy on 2006-04-05 at 23:14:47 (GMT)

   Fantastic! Thanks for these. I have 'swapfade' working perfectly but 'crossfade', which I'd prefer to use is giving me some trouble. When the new image starts to transition in, it is offset by a 2 or 3 pixels top and left. When it is fully rendered it then jumps into position. That's with Firefox/Mac. Using Safari the same thing happens but it looks more like just one pixel top and left.

   I have broken your rules a little as the images I am transitioning are not all the same size, which works fine with swapfade by the way.

   Can you offer any advice for this js newbie!
   Thanks again for these - andy

10. Multiple Image transitions

    Posted by Bob on 2006-04-08 at 22:05:06 (GMT)

    I love the script but I'm not sure if it can do what I'm hoping to do. What I want is to provide 3 or 4 images and have them transition between each other 1 -> 2 -> 3 -> 4 -> 1 etc. in a continuous loop to give the site more interest. By changing the speed slightly on each group of images it should be a really cool effect.

    Any ideas how I can implement this?

11. RE: Image transitions

    Posted by brothercake on 2006-04-18 at 20:51:29 (GMT)

    @andy what you're probably seeing is inaccuracies in the getRealPosition function. Although it's right most of the time, in most situations, there are various browser quirks that can affect the offset positions you get back from elements. These are things like borders on intermediate elements, and the value of the body padding.

    One thing you can do is look at the CSS of the elements between the image and the body (including the body itself) and see if any of these is responsible for the discrepancy; then if it's possible to do so, negate those styles or apply them in another way.

    Another thing you can do is manually adjust the returned values, something like this at the very end of getRealPosition:

    return this.pos + 2;

    @bob As with an earlier post, I'm not really sure this is the right script for what you want. As soon as you start playing with multiple sequences that run indefinitely you get into new usability and accessibility issues - how fast should the changeover be to accomodate different reading speeds? how can the user make it stop? is it dangerous to someone who has photosensitive epilepsy?

    This script is just designed to provide ad-hoc effects for single events, not to provide continual animation or slideshow. For that you would be better off looking for a script that's designed to do that, such as the link I mentioned in an earlier post.

12. RE: Image transitions

    Posted by andy on 2006-04-18 at 22:40:00 (GMT)

    Thanks James for the tip. I have gone with the 'swap' at the moment but I'm going to keep digging.

    I have used your routine successfully in an image slideshow coupled with an image element replace routine so Bob - if you want to get in touch I can send you the complete script if you are interested (andy at yellowswordfish dot com). I don't know if this is the best approach but it sure works fine.

    OK this.pos +2 - time to get dirty!

    Thanks again.
    andy

13. RE: Image transitions

    Posted by John on 2006-04-24 at 20:32:37 (GMT)

    Wow - great little script! Although for some reason I'm getting the crossfade "pop" that Karl (post #2) saw - but i'm getting it in Firefox 1.5.0.2 (WinXP) on your sample. Any suggestions would be much appreciated!

    John

14. RE: Image transitions

    Posted by andy on 2006-05-07 at 12:46:26 (GMT)

    Hi again James
    Thanks to your help I've got the slight image 'jump' I mentioned above fixed up.
    Am seeing a weird problem though. On Firefox - (Mac - no opportunity to try it yet on a PC) - Swapfade behaves perfectly but with the same page using Crossfade, just at the start of the change the whole page shifts left, I get a brief glimpse of a scrollbar on the right, then it jumps back into position again. It doesn't do it using Safari. Doesn't do it using Opera (which doesn't fade either!). Wondered if you might have come across this and know the possible cause.
    Thanks again for some great scripts and for the help last time round.
    Andy

15. RE: Image transitions

    Posted by brothercake on 2006-05-12 at 08:32:14 (GMT)

    @andy Is your page layout right on the threshold of creating scrollbars, like, it's only just enough to fit above the fold? It could be that in the creation of a new element, the overflow is being briefly triggered..

    @John As for other similar issues, I suggest making manual adjustments to the positioning, or seeing if there are any intermediate elements that might be throwing the positioning calculations off?

16. RE: Image transitions

    Posted by andy on 2006-05-12 at 10:31:42 (GMT)

    Hi again James.

    "Is your page layout right on the threshold of creating scrollbars": Actually - just the opposite strangely enough. If I add content to force a scrollbar then it works fine - except that during the crossfade, the scrollbar gets shorter - suggesting my page gets longer! As if elements were being added to the bottom. Weird!

    This ONLY happens using Firefox. Opera/Safari perform flawlessly as does SwapFade on Firefox. For that reason I don't think it's anything I am doing but some strange manifestation...!

    Hate to bug you but if you DO have any ideas it would be appreciated. It is the last piece of my puzzle!

    Thanks again for great scripts. regards
    Andy

17. RE: Image transitions

    Posted by andy on 2006-05-13 at 17:23:03 (GMT)

    OK - Crossfade. It's the creation of the new element to the body tag that is the problem. And only on Firefox. I guess Firefox is sensing the new element and re-rendering which the other browsers don't do and, being the body tag, it seems to be added to the bottom. At least that seems to make sense. By changing the body to another, empty and unique tag, the problem gets resolved. Sort of! -although unsafely of course.

    Odd that this does not manifest itself with swap or wipe though....

    Anyway - nice to have solved it and once again - thanks for the scripts.
    

18. RE: Image transitions

    Posted by Bill on 2006-05-16 at 16:39:48 (GMT)

    Did anyone manage to find a fix for Karl's problem in post 2? - maybe I missed it. Excellent script anyways - thx.

19. RE: Image transitions

    Posted by James on 2006-07-19 at 21:46:11 (GMT)

    I too am having the same problem as Karl (post #2). It happens in IE but not Firefox. Any ideas about this?

20. RE: Image transitions

    Posted by James on 2006-07-20 at 01:12:13 (GMT)

    when an image has faded in, it quickly swaps for the previous one, just for a moment. It's as if the script says, 'alright, we've finished loading, here's a quick flash-back to what you viewed before'

    I found out what the problem was. I have the Google toolbar, and it has a feature called "AutoLink" which looks for street addresses on the page and makes them link to a map. I noticed that whenever the flashback glitch was happening, the AutoLink icon in the toolbar would flicker (and I do have a street address at the bottom of the page). I disabled the AutoLink feature and the glitch disappeared.

    Any ideas on why this happens, and how to keep it from happening without disabling AutoLink?

21. RE: Image transitions

    Posted by Michael on 2006-08-07 at 10:46:18 (GMT)

    This script is awesome!!! I'd love to use it in a new site I'm making, but I need the image to transition itself. I have an image built into my web site layout, and I want the image to crosswipe into another image (same size and all) after 5-10 seconds.

    So basically instead of having the JavaScript activated onClick, I need it to start up automatically and continue to rotate through an image set.

    Any help would be greatly appreciated!

    Thanks,
    Michael

22. RE: Image transitions

    Posted by luca on 2006-08-08 at 13:23:45 (GMT)

    hi,

    you think it's possible to obtain the same results with "div"?

    thanks

23. Image transitions for the background

    Posted by Nick Miller on 2006-08-22 at 10:04:33 (GMT)

    Hi!

    Congratulations for this script!

    I want to use the crossfade.js to change an image I place behind all others elements of the site. But during the crossfade, the image comes over all. How th change this ?

    Thanx a lot!!

    Nick Miller

24. @Mickael

    Posted by Nick Miller on 2006-08-22 at 10:08:28 (GMT)

    You just have to do something like that:

    function change(){
        
            
        crossfade(gid('background_image'), 'myimage.jpg', '2', '')
            
    }
        

    setInterval('change()',4000);

25. @Mickael

    Posted by Nick Miller on 2006-08-22 at 10:20:44 (GMT)

    You just have to do something like that:

    function change(){
        
            
        crossfade(gid('background_image'), 'myimage.jpg', '2', '')
            
    }
        

    setInterval('change()',4000);

26. RE: Image transitions

    Posted by Mad Shreder on 2006-08-22 at 13:44:13 (GMT)

    Hello!

    I've an error with IE 6 :

    "ixf.newimg.filters.alpha" is null or not an object

    Does someone know what's the matter ?

    Thanks!

27. Firefox verticle scrollbar, IE ugly blacks, BarelyFitz

    Posted by Daniel on 2006-11-18 at 12:56:33 (GMT)

    i have a similar problem as andy with the scroll bar and am not understanding how he resolved it. something about the body tag?

    also, has anyone else noticed that IE fades (performed by any script) often are ugly in that the deep blacks become nasty white artifacts? any solutions to that?

    i found this script to work in opera just fine. if i could just fix the above two problems this would be the ultimate script, especially since it is really easy to integrate into the BarelyFitz slideshow script which has the controls and automation like some have mentioned a desire for. [all i had to do, after following their instructions to completion, was replace one line in their slideshow.js file, namely the update() function line 267:
    this.image.src = slide.image.src;
    became
    crossfade(this.image, slide.image.src, '2', '');
    i'm sure that is so wrong and more could be done to properly combine these two scripts, but it works with only the one change... maybe that is why they link to this site from their docs?]

28. IE fade artifacts

    Posted by Daniel on 2006-11-18 at 19:43:00 (GMT)

    this thread says that there is no real solution to the defects in dark images seen during IE fading, and that it is best avoided by not using jpegs for the effected images: http://www.dynamicdrive.com/forums/showthread.php?t=14510
    any other fixes?

Discussion closed

New comments are no longer accepted for this page.