DHTML Gum Slideshow 3.11 Image Animation Effect

DHTML Gum Slideshow 3.11 Image Animation Effect
Slideshow with unique double gum effect. You may add a link and comment for each slide (image). Works with IE4x/5x/6x AND NS6x/7x AND Opera 6x/7x. Brought to you by www.24fun.com

Configuration:

Step 1: Open the web page that will display your DHTML Slideshow. Use a simple text editor (NotePad or WordPad). Insert the following code where you wish to add the DHTML Slideshow:

<table width=400 height=90><tr><td>
<script>
// CREDITS:
// Gum Slideshow 3.11
// By Peter Gehrig
// Copyright (c) 2004 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.com
// 1/31/2004

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

// CONFIGURATION:
// Go to http://www.24fun.com
// and create your own slideshow
// with our new Slideshow Fayctory.

var slideurl=new Array()
var slidecomment=new Array()
var slidelink=new Array()
var slidetarget=new Array()

///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE STARTS HERE
//////////////////////////////////////////////////////////////////////////

// Set the URLs of your slides (images)
slideurl[0]="imggum1282.jpg"
slideurl[1]="imggum2282.jpg"
slideurl[2]="imggum3282.jpg"

// Add a link for each slide
// If you don't want to link a slide type "#" instead (see middle-sample below)
slidelink[0]="http://www.petergehrig.ch/plu/index_plu.html"
slidelink[1]="#"
slidelink[2]="http://www.24fun.com/downloadcenter/benchjs/benchs.html"

// Add a target for each link
// Allowed values are: "_blank", "_top", "_parent", "_self" or the name of a frame
slidetarget[0]="_blank"
slidetarget[1]="_blank"
slidetarget[2]="_top"

// Add a comment for each slide
slidecomment[0]="10'000 miles away from L.A."
slidecomment[1]="Welcome in Switzerland!"
slidecomment[2]="Australia, I'm coming!"

// Set the font for the comments
var slidefont="Arial"

// Set the fontcolor for the comments
var slidefontcolor="black"

// Set the fontsize for the comments (HTML-values ranging form 1 - 6)
var slidefontsize=5

// Set the width of the pictures (pixels)
var slidewidth=400

// Set the height of the pictures (pixels)
var slideheight=60

// Set the pause between the pictures (seconds)
var pause=3

///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE ENDS HERE
//////////////////////////////////////////////////////////////////////////

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

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

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

var pos_left=0
var pos_top=0
var speed=20
var step=10
var i_loop=0
var i_image1=0
var i_image2=1
var i_space=""
var all_space=""
var max_space=20
var content=""
var i_slide=0
pause*=1000

function stretchimage() {
	if (i_loop<=slidewidth) {
		if (ie) {
			imgcontainer1.innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
			document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
			
			imgcontainer2.innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
		}
		if (ns6) {
			document.getElementById('imgcontainer1').innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
			document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
			
			document.getElementById('imgcontainer2').innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
		}
		i_loop=i_loop+step
		var timer=setTimeout("stretchimage()",speed)
  	}
	else {
		clearTimeout(timer)
		var imgcontent="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a><br><font face='"+slidefont+"' size="+slidefontsize+" color='"+slidefontcolor+"'>"+slidecomment[i_image1]+"</font>"
		if (ie) {
			imgcontainer1.innerHTML=imgcontent
			document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop	
			imgcontainer2.innerHTML=""
		}
		if (ns6) {
			document.getElementById('imgcontainer1').innerHTML=imgcontent
	document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop	
			document.getElementById('imgcontainer2').innerHTML=""
		
		}
		changeimage()
	}
}

function changeimage() {
	i_loop=0
	i_image1++
	if (i_image1>slideurl.length-1) {i_image1=0}
	i_image2=i_image1-1
	if (i_image2>slideurl.length-1) {i_image2=0}
	if (i_image2<0) {i_image2=slideurl.length-1}
	if (ie) {
		document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
	}
	if (ns6) {
		document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer2').style.left)
	}
   	var timer=setTimeout("stretchimage()",pause)
}

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

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 || ns6) {
	var slideh=slideheight+30
	document.write("<div style=\"position:relative;width:"+slidewidth+"px;height:"+slideh+"px;overflow:hidden\">")
	document.write("<div id=\"imgcontainer1\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[0]+"\"></div>")
		document.write("<div id=\"imgcontainer2\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[1]+"\"></div>")
	document.write("</div>")
	window.onload=stretchimage
}
else {
	document.write("<a href=\"javascript:simpleslideshowjump()\"><img name=\"slideimage\" src=\""+slideurl[0]+"\" border=0></a>")
	window.onload=simpleslideshow
}
</script>
</td></tr></table>

Step 2: Go to the very first line of the code you have added and set the width and height of the DHTML slideshow inside the table. Make sure to set the height of the table about 30 (pixels) higher than the actual height of your images. That ensures that there is enough room for your comments.

Step 3: Configure URLS of the images, links, font attributes, comments, speed and image size inside the edit zone (on top of the code).