PDA

View Full Version : Resolved Ultimate Fade-In Slideshow no Images on FF



coloristmedia
11-30-2008, 11:36 PM
1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I did the updated version of this script and it did not work on Firefox. The images don't show at all. On IE I do see it... however, the images are randomized and I'd like everything to be in order.

So I looked up some topics on this script and I found a site that got it to work, so I copied their way of doing it and it still didn't work (www.quamichanlake.ca/testslides.html).

You can see the script on my site here:

http://dweeb.coloristmedia.net/script2.html

So, here are the problems I'd like to solve:

a.) how do I make the images appear in the order I want them to?
b.) what do I need to enhance to make the script work in FF as well as IE?

Thank you!

coloristmedia
11-30-2008, 11:39 PM
By the way, I originally LOVED this script:

http://www.dynamicdrive.com/dynamicindex14/image4.htm

It was absolutely PERFECT and this is what it looked like on my page (effect shows in IE):
http://www.dweeb.coloristmedia.net/script.html

Unfortunately, the images just jump from one to the next on FF without any fade. Which is why I had to switch to the Ultimate Script but not having any luck loading it either.

jscheuer1
11-30-2008, 11:56 PM
The Ultimate Fade-in slideshow (v1.51) works just fine in FF when correctly executed. This (your image array) doesn't follow the template as explained on the demo page:


var fadeimages1=new Array()
fadeimages1[0]= ["6.png"]
fadeimages1[1]= ["5.png"]
fadeimages1[2]= ["4.png"]
fadeimages1[3]= ["3.png"]
fadeimages1[4]= ["2.png"]
fadeimages1[5]= ["1.png"]
fadeimages1[6]= ["intro.png"]


It should be:


var fadeimages1=new Array()
fadeimages1[0]= ["6.png", "", ""]
fadeimages1[1]= ["5.png", "", ""]
fadeimages1[2]= ["4.png", "", ""]
fadeimages1[3]= ["3.png", "", ""]
fadeimages1[4]= ["2.png", "", ""]
fadeimages1[5]= ["1.png", "", ""]
fadeimages1[6]= ["intro.png", "", ""]


There could also be other problems.

coloristmedia
12-01-2008, 12:09 AM
Hi John,

I have switched to the original code on the website. And I enhanced what you said. Now I simply do not see anything.

http://dweeb.coloristmedia.net/script2.html

coloristmedia
12-01-2008, 12:31 AM
John,

I have resolved the randomizing issue and the box is showing on IE again. Still no firefox though. I really don't know what the deal is.

Also, I set the border to 1 because I want a white border, but it's not showing either.

coloristmedia
12-01-2008, 01:06 AM
I got it to work. The problem was the table tag on top of the script. I took that out and it works fine.

Now that both problems are solved, I just want to know how the border color can be customized? I want my border to be white, but it appears to be black and I don't see where color could be enhanced?

jscheuer1
12-01-2008, 01:19 AM
That all depends upon - the border of what?

You might like this effect (the code goes in the head of your page):


<style type="text/css">
#master0 img {
border: 1px solid #fff;
}
</style>

Other borders for the images can be specified, as well as other border effects for the elements generated by the script.

If you don't have enough to go on with the above, please be more specific as to what you want.

coloristmedia
12-01-2008, 01:33 AM
That all depends upon - the border of what?

You might like this effect (the code goes in the head of your page):


<style type="text/css">
#master0 img {
border: 1px solid #fff;
}
</style>

Other borders for the images can be specified, as well as other border effects for the elements generated by the script.

If you don't have enough to go on with the above, please be more specific as to what you want.

John, you're awesome. Thanks for your help.

Since you're the most intelligent guy around here, it seems, could you help me with one more thing?

If your answer is yes, please have a look at http://dweeb.coloristmedia.net/script.html (in IE so you can see the effect).

That's an old script that I couldn't get to work in FF. I really like the fading in/out time for every image. It's perfect.

How would I go about editing how much one image fades before it switches to another, and so on?

Snookerman
12-01-2008, 06:36 AM
I'm using the same script but the dd page says that the fading effect only works in IE. I think you might have to use js or something like that.

jscheuer1
12-01-2008, 08:19 AM
If I understand the question correctly, you can control the duration of fading in the Ultimate Fade-in slideshow (v1.51), but it's a little tricky. Find the two highlighted numbers:


function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tem . . .

and:


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

The first sets the relative amount (on a scale from 0 to 100) that opacity is incremented each time the fade in loop repeats. The larger it is, the faster things go. It must be able to be evenly divided into 100. For various reasons, generally only 2, 5, 10, or 20 will work out at all.

The second sets how frequently (in milliseconds) the fade in loop will execute. The larger it is, the slower things will go. A minimum value of 20 (pretty fast) is thought to be prudent for older machines (CPU's). 70 (pretty slow) is about as slow as you can go without losing smoothness.

By adjusting one or the other or both of these two values, you should be able to get the duration effect you desire.

Now, it is possible within the ranges that I've just outlined to get a combination that will lack smoothness, some discretion/trial and error may be required. And be aware that if the resulting fade duration takes longer than the delay set for the slideshow, no image will have the opportunity to fade in completely before it changes to the next image. If that happens and the effect is otherwise as desired, simply increase the delay.

coloristmedia
12-04-2008, 01:09 AM
Thank you, John. You are most helpful!