Need Help with Fade In Image Script

http://clagnut.com/sandbox/imagefades/

I found an amazing JS Script above that fades an image into view upon page load.

The only problem, it seem to only work for one image at a time. I tried with two, but only one of them wanted to fade.

Is there anyone who can please help me out so it works with - actually - three different images?

 

Nice article you found their. Submit it to social medias and it might help you find the answer or ask in Wiki websites.

 

That is not very good code, I suggest you look for an alternative script.

 

Well that's the problem, I can't find another one. That's why I'm asking for help

 

Actually, I have a different question.

<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

Code (markup):

Is there a way to make it so that the image doesn't load until 5 seconds or so pass?

 

write a new one from scratch... if you install mootools (hxxp://mootools.net) doing an image fade is a case of:

<img src="blah.gif" id="image_1" style="display: none" />
<img src="blah.gif" id="image_2" style="display: none" />

HTML:

// to delay it... an anonymous function
(function() {
    // first image, make it visible then change opacity to 0 and fade in to 1
    $("image_1").set({
        styles: {
            display: "block"
        },
        opacity: 0
    }).fade(0,1);

    // now image 2.
    $("image_2").set({
        styles: {
            display: "block"
        },
        opacity: 0
    }).fade(0,1);
}).delay(5000) // 5 seconds.

Code (markup):

to be unbiased, there are other JS frameworks like jQuery, GWT (google), YUI (yahoo), prototype/scriptaculous etc. they all have an api for fade in/out as well as great controls for timings or chaining of events. this is the future - using antiquated scripts with dubious cross browser capabilities is so 1999

 

Just use a JS framework (like suggested by the guy above me) and do it yourself. I just started using jquery and it's super easy, you can do something like set all images with a class of "fade" to fade to a certain opacity with about 4 lines of code.