DHTML JavaScript Sound and Wipe Slideshow Message Animation Code

DHTML JavaScript Sound and Wipe Slideshow Message Animation Code
Animate your images with this highly flexible sound and wipe slideshow. You may add as many images as you like. Each image can be linked separately. Easy configuration of text, font, font-size, font-color, link, speed and sound. Full effects with IE 5x/6x, fade effect for NS 6x/7x, basic effect with Opera 6x/7x and NS 4x.

Download Slideshow Factory
The above script has been created by the new unique Slideshow Factory. This unique tool allows you to create many different image animations for your web pages. No programming skills required. You can view, check and edit all effects while you are creating them. Slideshow Factory generates the finished code for your web page.

Configuration:

Step 1: Open the web page that will display your message boxes. Use a simple text editor such as NotePad or WordPad. Frontpage, Dreamweaver, GoLive or Word are not recommended. Insert the following code right below the <body>-tag. :

<table width=360 height=160 cellpadding=0 cellspacing=0 border=0><tr><td>
<SCRIPT>
// CREDITS:
// Sound and Wipe Slideshow
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2003 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.fabulant.com & http://www.designerwiz.com
// info@24fun.com
// 4/1/2003

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// CONFIGURATION:
// Go to http://www.fabulant.com
// and create your own slideshow
// with our new Slideshow Factory.

////////////////////////////////////////////////////////
// Set the values of you slideshow below this line

var slideurl=new Array()
// URLs of your slides (pictures). Add as many as you like
slideurl[0]="1.jpg"
slideurl[1]="2.jpg"
slideurl[2]="3.jpg"

var slidecomment=new Array()
// Comment for each picture
slidecomment[0]="That is picture one. Do you like it?"
slidecomment[1]="Yes, now comes picture two. It's almost done."
slidecomment[2]="Finally there is picture three, the last one!"

var slidelink=new Array()
// Link for your slides
slidelink[0]="http://www.altavista.com"
slidelink[1]="http://www.yahoo.com"
slidelink[2]="http://www.google.com"

// Target for each slide-link
var slidetarget=new Array()
slidetarget[0]="_blank"
slidetarget[1]="_top"
slidetarget[2]=""

// URL of the sound-file
var slidesound="sound_swish.wav"

// Font
var slidefont="Arial"

// Font-color
var slidefontcolor="blue"

// Font-size (acceptable values form 1 to 6)
var slidefontsize=2

// Width slideshow (pixels)
var slidewidth=360

// Height slideshow (pixels)
var slideheight=160

//Pause between each slide (seconds)
var pauseslide=3

// Do not edit the code below this line //
/////////////////////////////////////////

var textposition="right_auto"
var slidecontent
var max_space=19
var space=" "
var i_substring=0
var i_space=max_space
var all_space=" "
var content=""
var pausefade=20
var i_slide=0
var i_filter=-1
var nextorprevious=1
var transparency=0
var transparencystep=5
var isloaded=false
var started=false
var stopshow=false

var newpause=pauseslide
var checkpause=200
var neximage=""
var howmanycomplete=0
var preload_slides=-1
var pauseslide=pauseslide*1000

var browserinfos=navigator.userAgent  
var ie=document.all&&!browserinfos.match(/Opera/)?1:0 
var ns6=document.getElementById&&!document.all?1:0
var ns4=document.layers?1:0
var op=browserinfos.match(/Opera/)

var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
	preloadedimages[i]=new Image()
	preloadedimages[i].src=slideurl[i]
}

function initslideshow4() {
	setimagetocache()
	getcontent()
	if (ie) {
		slidecontainer.innerHTML=slidecontent
		}
	if (ns6 || op) {
		transparency=100
		document.getElementById('slidecontainer').innerHTML=slidecontent
	}
	var inittimer=setTimeout("checkifcached()",100)
}

function setimagetocache() {
	preload_slides++
	if (preload_slides<=slideurl.length) {
		nextimage=new Image();
   		nextimage.src=slideurl[preload_slides];
		checkautocached()
	}
}

function checkautocached() {
	if (nextimage.complete) {
		howmanycomplete++
		setimagetocache()
	}
   	else {
   		var timer2=setTimeout("checkautocached()",checkpause);
	}
}

function stopslideshow() {
	stopshow=true
}

function playslideshow() {
	stopshow=false
}
			
function checkifcached() {
	if (i_slide<=howmanycomplete) {
		if (ie) {
			if (textposition=="top_auto" || textposition=="bottom_auto"  || textposition=="left_auto" || textposition=="right_auto" || textposition=="top_auto_nocontrols" || textposition=="bottom_auto_nocontrols") {
				var nextimer=setTimeout("autoslide()",newpause)
			}
			if (textposition=="top_hand" || textposition=="bottom_hand" || textposition=="left_hand" || textposition=="right_hand") {
				if (started) {
					handslide()
				}
				started=true
			}
		}
		if (ns6 || op) {
			if (textposition=="top_auto" || textposition=="bottom_auto"  || textposition=="left_auto" || textposition=="right_auto" || textposition=="top_auto_nocontrols" || textposition=="bottom_auto_nocontrols") {
				unfadeslide()
			}
			if (textposition=="top_hand" || textposition=="bottom_hand" || textposition=="left_hand" || textposition=="right_hand") {
				if (started) {
					fadeslidehand()
				}
				started=true
			}
		}
   	}
   	else {
		newpause=newpause-checkpause
		if (newpause<1200) {newpause=1200}
   		var timer2=setTimeout("checkifcached()",checkpause);
	}
}

function getcontent() {
	if (textposition=="top_auto") {
		slidecontent="<font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a>"
	}
	else if (textposition=="bottom_auto") {
		slidecontent="<a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font>"
	}
	else if (textposition=="left_auto") {
		slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td align=right><a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td></tr></table>"
	}
	else if (textposition=="right_auto") {
		slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td><td><a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td></tr></table>"
	}
	else if (textposition=="top_auto_nocontrols") {
		slidecontent="<font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a>"
	}
	else if (textposition=="bottom_auto_nocontrols") {
		slidecontent="<a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font>"
	}
	else if (textposition=="top_hand") {
		slidecontent="<font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a>"
	}
	else if (textposition=="bottom_hand") {
		slidecontent="<a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font>"
	}

else if (textposition=="left_hand") {
		slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td align=right><a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td></tr></table>"
	}
	else if (textposition=="right_hand") {
		slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td><td><a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td></tr></table>"
	}
}

function unfadeslide() {
	if (transparency<100){
		transparency+=transparencystep
		if (ns6) {
			document.getElementById('slidecontainer').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("unfadeslide()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		var fadetimer=setTimeout("fadeslide()",newpause)
	}
}

function unfadeslidehand() {
	if (transparency<100){
		transparency+=transparencystep
		if (ns6) {
			document.getElementById('slidecontainer').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("unfadeslidehand()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
	}
}

function fadeslide() {
	if (!stopshow) {
		if (transparency>0){
			transparency-=transparencystep
			if (ns6) {
				document.getElementById('slidecontainer').style.MozOpacity=transparency/100
			}
			var fadetimer=setTimeout("fadeslide()",pausefade)
		}
		else {
			var autotimer=setTimeout("autoslide()",200)
		}
	}
	else {
		var stoptimer=setTimeout("fadeslide()",500)
	}
}

function fadeslidehand() {
	if (transparency>0){
		transparency-=transparencystep
		if (ns6) {
			document.getElementById('slidecontainer').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("fadeslidehand()",pausefade)
	}
	else {
		i_slide++
		if (i_slide>=slideurl.length) {i_slide=0}
		getcontent()
		document.getElementById('slidecontainer').innerHTML=slidecontent
		transparency=0
		var fadetimer=setTimeout("unfadeslidehand()",500)
	}
}

function autoslide(){
	if (ie) {
		if (!stopshow) {
			newpause=pauseslide
			i_slide++
			if (i_slide>=slideurl.length) {i_slide=0}
			getcontent()
			i_filter++
			if (i_filter>slidecontainer.filters.length-1) {i_filter=0}	
			slidecontainer.filters[i_filter].apply()
			slidecontainer.innerHTML=slidecontent
			document.all.sound.src=slidesound;
			slidecontainer.filters[i_filter].play()
			checkifcached()
		}
		else {
			var stoptimer=setTimeout("autoslide()",500)
		}
	}
	if (ns6 || op) {
		newpause=pauseslide
		i_slide++
		if (i_slide>=slideurl.length) {i_slide=0}
		getcontent()
		document.getElementById('slidecontainer').innerHTML=slidecontent
		transparency=0
		i_space=max_space
		checkifcached()
	}
}

function handslide(){
	i_slide++
	if (i_slide>=slideurl.length) {i_slide=0}
	getcontent()
	if (ie) {
		i_filter++
		if (i_filter>slidecontainer.filters.length-1) {i_filter=0}	
		slidecontainer.filters[i_filter].apply()
		slidecontainer.innerHTML=slidecontent
		slidecontainer.filters[i_filter].play()
	}
	if (ns6 || op) {
		document.getElementById('slidecontainer').innerHTML=slidecontent
		transparency=100
	}
}

function simpleslideshow() {
	i_slide++
	if (i_slide>=slideurl.length) {i_slide=0}
	document.slideimage.src=preloadedimages[i_slide].src
	simpleslideshowcomment()
	var fadetimer=setTimeout("simpleslideshow()",pauseslide)
}

function simpleslideshowjump() {
	if (slidetarget[i_slide]=="_self") {
		document.location.href=slidelink[i_slide]
	} 
	else if (slidetarget[i_slide]=="_blank") {
		codepopup=window.open(slidelink[i_slide], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=780,height=580,top=10,left=10");
	} 
	else if (slidetarget[i_slide]=="_top") {
		top.location.href=slidelink[i_slide]
	} 
	
	else if (slidetarget[i_slide]=="_parent") {
		parent.location.href=slidelink[i_slide]
	} 
	else {
		var jumpto=eval("parent."+slidetarget[i_slide])
		jumpto.location.href=slidelink[i_slide]
	}
}

if (ie) {
	document.write('<div style="position:relative;width:'+slidewidth+'px;height:'+slideheight+'px;overflow:hidden">')
	document.write('<div id="slidecontainer" style="position:absolute;width:'+slidewidth+'px;height:'+slideheight+'px;top:0px;left:0px;filter:progid:DXImageTransform.Microsoft.GradientWipe(duration=1.2,wipeStyle=1)"></div>')
	document.write('</div>')
	document.write('<embed src="'+slidesound+'" autostart="false" hidden="true">')
	document.write('<bgsound id="sound">')
	window.onload=initslideshow4
}
else if (ns6||op) {
	document.write('<div style="position:relative;width:'+slidewidth+'px;height:'+slideheight+'px;overflow:hidden">')
	document.write('<div id="slidecontainer" style="position:absolute;width:'+slidewidth+'px;height:'+slideheight+'px;top:0px;left:0px;-moz-opacity:100"></div>')
	document.write('</div>')
	window.onload=initslideshow4
}
else if (ns4) {
	document.write('<a href="javascript:simpleslideshowjump()"><img name="slideimage" src="'+slideurl[0]+'" border=0></a>')
	i_slide=-1
	window.onload=simpleslideshow
}
</script>
</td></tr></table>

IMPORTANT: do not paste the code into table-cells or between <div> tags or <span> tags!

Step 2: Open your web page. Go to the top of the script-code and configure the the slides, messages, width, height and font-attributes. IMPORTANT: set the width and height of your slideshow also inside the leading table-tag (see first line of code).

Step 3: Click here to download the sound file sound_swish.wav. Put the sound file sound_swish.wav into the same folder as the web page that contains your slideshow.

Download 500 free copy-and-paste scripts