Free Webdesign Tutorials::Gum Slideshow 3.11

Web Designing Made Easy	Add to Favourites	Tell a Friend
Web Designing Made Easy	Print this Page	Make Your Home Page

Create Free Websites

Free Web Tools

Free Keywords Software

Free Web Tools

Free JavaScripts

Other Services

Quick Links

Submit a Tutorial

Links

Free Resources

Translate a webpage in your Language

Earn money with your website

Suggestions

META Tag Generator

HTML Encryptor

Check Site Popularity

Search Suggestion Tool

Menu Generator

Ads Network

Home |Advertise | Contact Us | Free Resources | Submit a Tutorial

Gum Slideshow 3.11

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.freewebknowledge.com

Configuration:

Step 1: Open the webpage that will display your Slideshow. Use a simple texteditor (NotePad or WordPad). Insert the following code where you wish to add the 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.freewebknowledge.com/jscodes.php

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]="Images/image.png"
slideurl[1]="Images/banner167.gif"
slideurl[2]="Images/reseller.gif"
slideurl[3]="Images/telebay.gif"

// 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.freewebknowledge.com"
slidelink[1]="http://www.moreinfo247.com/9534595/FREE"
slidelink[2]="http://www.resellerspanel.com/a/nad275"
slidelink[3]="http://www.telebay.com/nad275"

// 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]="Welcome to Free Webknowledge."
slidecomment[1]="Want to Make Money.Click Here."
slidecomment[2]="Start Your Web Hosting Business."
slidecomment[3]="Start Your Own Business"

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

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

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