Sound and Wipe Slideshow

Sound and Wipe Slideshow
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 Full effects with Internet Explorer 5x/6x/7x/8x, fade effect for Firefox 3x/4x, basic effect with Opera 7x/8x/9x/10x and Chrome 3x/4x.

Brought to you by www.fabulant.com

Configuration:

Step 1: Open the webpage that will display your message boxes. Use a simple texteditor 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) 2010 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

// 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

////////////////////////////////////////////////////////
// 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>

Step 2: Open your webpage. 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 soundfile sound_swish.wav. Put the soundfile sound_swish.wav into the same folder as the webpage that contains your slideshow.