Results 1 to 10 of 10

Thread: Ultimate Fade-In Slide Show...Implementation Problem

  1. #1
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slide Show...Implementation Problem

    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:

    Code:
    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The simple answer is to set:

    Code:
    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:

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

    Code:
    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:

    Code:
    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:

    Code:
      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:

    Code:
    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:

    Code:
    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
    Last edited by jscheuer1; 11-25-2007 at 06:12 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    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:

    Code:
    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:

    Code:
    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=2
    if (obj.tempobj.filte . . .
    That line was:

    obj.degree+=10

    and:

    Code:
    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:

    Code:
    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):

    Code:
    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:

    Code:
    fadeimages[0]=["Moon.Wav MusicMedia_3.gif", "", ""] //plain image syntax
    Last edited by jscheuer1; 11-26-2007 at 08:02 AM. Reason: clarity
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by mark4man; 11-26-2007 at 11:52 PM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I never use DW.

    Edit: And, when surfing web pages, live on the net, I don't think anyone does.
    Last edited by jscheuer1; 11-27-2007 at 09:27 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •