Ultimate Fade-In Slide Show...Implementation Problem

[mark4man]

1) Script Title:

2) Script URL (on DD):

3) Describe problem: Hello...

[Not meaning to hijack this thread (but it does happen to be the one I'm having trouble with)]...

If someone could please take a look at this page from my site; & tell me what I did wrong in implementing the script...I would certainly appreciate it:

http://www.moonjams.com/moon.wav_musicmedia.htm

Problem:

1) The primary image seems to load correctly...the secondary image seems to fade in on top correctly (both images being .gifs in the same size transparent field...for uniformity of position)...but the primary image flickers once after the 2nd image loads; & then seems to flicker again as the 2nd image fades out (unless of course that's the 1st image fading in again, too fast, at the end of the cycle.)

I set my array up as follows:

fadeimages[0]=["Moon.Wav MusicMedia_3.gif"] //plain image syntax
fadeimages[1]=["LunarRecords_6.gif"] //plain image syntax

...(since I'm only using two images)...& eliminated the remainder of the array coding, up to the 'no need to edit beyond here' point.

The only other changes were:

fadebgcolor to 'transparent'
rate to 5000...(in an attempt to slow it down...see below.)
height & width (to match the exact size of the images.)


2) Any way to slow down the actual duration of fading? 5000 (5 seconds) seems to be a good rate for image exchange, but I'd like the fade in/out to be slower, if possible.

Thanks,

mark4man

[jscheuer1]

The simple answer is to set:

var fadebgcolor="black"

instead of to transparent as you currently have it, However, that then will cut off the lunar background image. You could change:

body {
	background-image: url(MoonWavs_BlackLeft.jpg);
}

to:

body {
	background-color: black;
}
#Layer1 {
background: black url(MoonWavs_BlackLeft.jpg) -320px 0;
}
#master0 div {
background: black url(MoonWavs_BlackLeft.jpg) -333px -10px;
}

Or you might prefer:

body {
	background-color: black;
}
#Layer1 {
background: black url(MoonWavs_BlackLeft.jpg) -127px 0;
}
#master0 div {
background: black url(MoonWavs_BlackLeft.jpg) -140px -10px;
}

Depending upon the original resolution you designed the page under.

Also, get rid of this:

  new fadeshow(fadeimages2, 435, 237, 0, 5000, 0)

it is causing an error, and you are not using it. And your array should look like so:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["Moon.Wav MusicMedia_3.gif", "", ""] //plain image syntax
fadeimages[1]=["LunarRecords_6.gif", "", ""] //plain image syntax

Edit: You would be better off with a narrower, optimized background image:



It would load much faster. Using it, the style could be:

body {
	background-color: black;
}
#Layer1 {
background: black url(moon.jpg) 381px 0px repeat-y;
}
#master0 div {
background: black url(moon.jpg) 368px -10px no-repeat;
}

Don't link to mine, save it. Here's a demo using the new image:

http://home.comcast.net/~jscheuer1/side/moon_h.htm

[mark4man]

John...

Getting rid of the second 'new fadeshow' set seemed to fix the entire thing...but restoring the original quotation mark sets in the array has caused the 1st image to have a faint, almost transparent shadow when not appearing. Weird.

Also...thanks for the advice on the background image & those changes...but the black background in the two .gifs (where mine were transparent) allows a black bleed into the moon.

But...believe it or not...after I posted, I swapped that script for the Blending Image Slideshow, which actually works better for what I had originally intended (which is a slower transition on the fade; & a true image swap.) All I have to do...(in order to have some centering uniformity for my 2nd image)...is to change it's transparent background to a solid one of the same form & size as the oval which represents the first. Give me a half hour & I'll have that one up; & you can check it out.

Thanks again,

mark4man


BTW...I know you from somewhere, I'm reasonably certain.

[jscheuer1]

Did you view my demo:

http://home.comcast.net/~jscheuer1/side/moon_h.htm

?

It doesn't have any of those problems you mentioned.

Blending Image only fades in IE. If you like my demo, except for the fade rate, that can be adjusted. U Fade works in all browsers that support any type of image fading, which is quite a number of them.

[mark4man]

Yes...

I do like it (especially if Blending Image only works in IE)...but I'd like to implement it w/ my new transparent background 2nd image (Lunar Records...the one that's up there now); & w/ my original background image.

Your fade is much smoother than the original...but I'd like to slow it down a little (meaning the entire transition, along w/ a slower fade...if possible.)

I'll copy your new code tonite...but work on it tomorrow (I'm 'bout beat up this evenin'...gotta' hit the sheets soon, man.)

Thanks again,

mark4man

[jscheuer1]

I'm not sure why you would want your original background image. The one I made for you is about 17k as opposed to about 119k for the original. Unless, you can tell the very subtle difference in resolution. If that is the case, I can probably make a version at about 25k that has the same resolution as the original. But I can guarantee you that no one else would ever know the difference, and that 17k is better 25k for dial up and other slow connections. The k byte savings in either case is significant, but only matters on slower connections, like dial up, or even with broadband when there is any network slow down.

If positioning is the issue, that can be tweaked in the style section.

You can easily change the images used in the show, in this case substituting:

fadeimages[1]=["LunarRecords_8.gif", "", ""] //plain image syntax

for:

fadeimages[1]=["LunarRecords_6.gif", "", ""] //plain image syntax

Now, about the fade rate. I think the rate in my demo is optimal, but you can slow it down more. The spots where I modified U Fade are as follows:

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=0 //initial opacity degree (0%)
this.curimag . . .

That line was:

this.degree=10 //initial opacity degree (10%)

and:

function fadepic(obj){
if (obj.degree<100){
obj.degree+=2
if (obj.tempobj.filte . . .

That line was:

obj.degree+=10

and:

fadeshow.prototype.resetit=function(){
this.degree=0
var crossobj=iebrowser? ie . . .

That line was:

this.degree=10

The two changes to 10 from 0 just set the images to start fading in from complete invisibility rather than 10% opacity. The change from 10 to 2 slows down the fade rate. To make it slower, 1 is the next option, but I think that is too slow. There is one other place you can edit, to slow things down by only a little. That's here:

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curca . . .

In this case, increasing the number 50 in the above will slow things. You shouldn't increase it by much though, because too much of an increase will make the transitions choppy. 60 or 70 are about as high as you should go.

One other issue that I'm not sure you are aware of, by removing (red):

new fadeshow(fadeimages, 435, 237, 0, 5000, 1, "R")

you will remove the random nature of the show, making it always start with the first image. As things are now, that would be this image:

fadeimages[0]=["Moon.Wav MusicMedia_3.gif", "", ""] //plain image syntax

[mark4man]

John...

Just opened you new code in Dreamweaver & ran a browser preview.

Something in your code is causing the transparent background in the 1st array image (Moon.Wav MusicMedia_3.gif) to fade in as black & then dissapear, the second time the image comes up in the sequence. It's easy for the eye to pick this up 'cause it happens on top of the moon image.

This is getting too complicated. All I want is for both images to fade in & out while swapping places...that's it. I just want it to look like what I have in place now (& work in all browsers.) I'll use your partial background image idea 'cause it makes sense for low bandwidth surfers as you said...but I need those two header images to be clean.

If you can do that I'll be appreciative of it.

Thanks,

mark4man


UPDATE:
Went back & looked again. That fade anomally is actually happening as the 1st array image fades out.

[jscheuer1]

I never use DW.

Edit: And, when surfing web pages, live on the net, I don't think anyone does.

[mark4man]

what???

I'm just talking about the browser preview in DW. DW is just the app I use to build all my pages...but it doesn't matter where the browser is opened from...the fade blink (or whatever it is) problem occurs.

[jscheuer1]

Now, I apologise if I was a bit short with you, but I have only limited time available to help folks, so sometimes I get impatient when there appears to be a communication problem. Especially in cases like this where I'm already doing more than the average amount of work to provide a solution. But, that was my choice, so that part's on me for now.

That being said:

DW, though not as bad as some other WYSIWYG editors, can mess up scripts. And, even when not doing so, can make them look odd in preview mode.

With scripts, knowing how to use a text only editor is a good skill to cultivate.

View my demo directly in a browser. If there is still some problem, let me know what browser it is, and what the problem is.

I made up another one, if you don't exactly like the first:

http://home.comcast.net/~jscheuer1/side/moon_h_2.htm