DHTML Slideshow with flash like dissolving effect

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

Configuration:

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

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

// CREDITS:
// Slideshow with flashlike dissolving effect
// by Peter Gehrig and Urs Dudli
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com & http://www.designerwiz.com.
// info@24fun.ch
// 7/31/2001

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.24fun.com on the webpage 
// where the scrips will be running.

// // // // // // // // // // // // // // // // // // // // // // // 
// 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.designerwiz.com"
imgsurl[1]="http://www.snapbuilder.com"
imgsurl[2]="http://www.pda-cell.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 web page.

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

Click here and download 500 free copy and paste scripts!