Fade effect in Ultimate Fade-in slideshow

[chali]

Hi, is there a way to extract the transition effect used in Ultimate Fade-in slideshow and use it on preloaded images in a different way?

ie:

IMAGE HERE

view image: 1 - 2 - 3 - 4 - 5 - 6

and let the user choose what image to see... using the same transition used in Ultimate Fade-in slideshow between them

I need a function to do that and that's the best one i found, but i can't isolate it from the script

Or maybe if anyone knows a way to do something like that with other function, it has to be cross browser.

thanks!

[jscheuer1]

Have a look at the modified script code in this post. You will see at the end of the demo code, in it's body section, onmouseover and onmouseout fade events. They could just as well be onclick fade events.

[chali]

thanks jscheuer1 it works great!

http://www.joaquinmarjona.com/test/

The transition is kind of slow in firefox, but i guess is a firefox rendering problem with big images.

thank you very much, i've been looking for a transition like this for a month, this is the best one by far.

[jscheuer1]

Well, you can speed things up in FF by making a few changes to the script. In the function fadepic(obj), change this line:

obj.degree+=10

to:

obj.degree+=document.all? 10 : 25

and this line:

obj.tempobj.style.MozOpacity=obj.degree/101

to:

obj.tempobj.style.MozOpacity=obj.degree/101<1? obj.degree/101 : 99/100

Then in the fadeshow.prototype.rotateimage=function(), change this line:

fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)

to:

fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])", document.all? 50 : 25)

[Sluuz]

Hi! Thanks for making this awesome script.
I just tried embedding it into my site, but somehow I just can't get the position right.

I want the slideshow to appear at the top of the webpage, so it doesn't show a margin between the top and the slideshow. I put the code in a table that is at the right spot, but somehow, the slideshow appears 18 pixels too low. When I try to alter the relative positions (top:-18px the slideshow is at the right place, but the top 18 pixels won't show or change.

Very strange! Do you happen to know what I may be doing wrong?
(all elements are controlled with CSS and have their margins set to 0)

Thanks!

[jscheuer1]

Instead of using negative positioning, which can have unexpected results in some browsers when you are near the margin and/or padding of the page and/or container element itself, try removing the padding and margin by setting it to 0 in a style sheet in the head of the document:

<style type="text/css">
body {
margin-top:0;
padding-top:0;
}
</style>