Gum Slideshow, a free JavaScript created by fabulant com

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript Gum Slideshow
Free JavaScript slideshow with gum effect animation. Each image can be linked to a different Website. Easy configuration of images, speed and size. Crossbrowser: Internet Explorer 6x/7x/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x.

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body>-tag and </body>-tag:

// 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 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 (image)
// If you don't want to link a slide type "#" instead (see sample in the middle below)
slidelink[0]="http://www.petergehrig.ch/plu/index_plu.html"
slidelink[1]="#"
slidelink[2]="http://www.fabulant.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="#888888"

// Set the fontsize for the comment (pt, CSS-value)
var slidefontsize=10

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

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

// Set the height of the commetnzone below the pictures (pixels)
var messageheight=30

// 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 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}
	document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer2').style.left)+"px"
   	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]
	}
}

var slideh=slideheight+messageheight
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

</script>

Step 2: Go to the the top of the script and set the URLs of the images, the links, the font-attributes, the width and height of the slideshow as well as the height for the comment-zone.