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 (http://www.dynamicdrive.com/forums/showpost.php?p=23721&postcount=9). 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>