Slideshow with flashlike dissolving effect

Slideshow with flashlike dissolving effect
Create a slideshow with a smooth dynamic wavelike transition effect between the images. Add as many pictures as you like. Set each image to a link of its own. Crossbrowser. Netscape users will see a simple clean slideshow without special effect. Works not with NN6.

Configuration:

Step 1: Open your webpage. Paste the following code right below the <body> tag:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

// // // // // // // // // // // // // // // // // // // // // // // 
// C O N F I G U R A T I O N   S T A R T S   H E R E
// // // // // // // // // // // // // // // // // // // // // // //

// the URLs of your images. Add as many images as you like
var imgsname = new Array()
imgsname[0]="samplepicA.jpg"
imgsname[1]="samplepicB.jpg"
imgsname[2]="samplepicC.jpg"

// the the links of your images
var imgsurl = new Array()
imgsurl[0]="http://www.yahoo.com"
imgsurl[1]="http://www.altavista.com"
imgsurl[2]="http://www.excite.com"

// the target of your links. Accepted values: '_blank', '_self', '_top'
// '_parent' or the name of your window
var linktarget="_blank"

// standstill of each image(seconds)
var pause=3

// horizontal position of the slideshow (distance to the left margin of the browser-window, pixels)
var posleft=5

// vertical position of the slideshow (distance to the top margin of the browser-window, pixels)
var postop=5

// // // // // // // // // // // // // // // // // // // // // // // 
// C O N F I G U R A T I O N   E N D S   H E R E
// // // // // // // // // // // // // // // // // // // // // // //

// do not edit the code below
var contentimage=""
var i_image=0
var i_stepwave=0
var i_maxstepwave=40
var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgsname[i]
}
pause=pause*1000

function initiate() {
      contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
    if (document.all) {
		waveimage.innerHTML=contentimage
		waveimage.style.posLeft=posleft
		waveimage.style.posTop=postop
		enlargewave()
    }
    if (document.layers) {
        document.waveimage.left=posleft
		document.waveimage.top=postop
        changeimage()
    }
}

function enlargewave() {
    if (i_stepwave<=i_maxstepwave) {
	    waveimage.filters.wave.phase=i_stepwave
	    waveimage.filters.wave.strength=i_stepwave
        waveimage.filters.wave.lightstrength=i_stepwave
	    waveimage.filters.wave.freq=i_stepwave
        i_stepwave++
	    var timer=setTimeout("enlargewave()",50)
    }
    else {
        clearTimeout(timer)
        changeimage()
    }
}

function reducewave() {
    if (i_stepwave>0) {
	    waveimage.filters.wave.phase=i_stepwave
	    waveimage.filters.wave.strength=i_stepwave
	    waveimage.filters.wave.lightstrength=i_stepwave
	    waveimage.filters.wave.freq=i_stepwave
        i_stepwave--
	    var timer=setTimeout("reducewave()",50)
    }
    else {
        clearTimeout(timer)
        var timer=setTimeout("enlargewave()",pause)
    }
}

function changeimage() { 
    i_image++
    if (i_image>=imgsname.length) {i_image=0}
    contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
 
    if (document.all) { 
        waveimage.innerHTML=contentimage
        reducewave()
    }
    
    if (document.layers) {
        document.waveimage.document.write(contentimage)
        document.waveimage.document.close()
        var timer=setTimeout("changeimage()",pause)
    }
    
}

if (document.all) {
	document.write('<DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>')
}
if (document.layers) {
	document.write('<LAYER NAME="waveimage"></LAYER>')
	document.close()
}
window.onload=initiate

// - End of JavaScript - -->
</SCRIPT>

Step 2: Put your images into the same folder as your webpage.

Step 3: Go to the top of the script-code and configure the proprieties of the slidehow such as the URLs of the images, links, standstill between the images, position of the slideshow and more.

Click here to download files