Free JavaScript slideshow with borderline transition animation

» 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

JavaScript slideshow with borderline transition animation
What's so special about this free and funny JavaScript slideshow? Its transition effect is really crossbrowser! Each image has a link of its own. Easy configuration of images, links, speed and size. Crossbrowser: Internet Explorer 6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x!

Install it

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

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com right into the webpage where the script
// will be displayed.

//////////////////////////// START OF CONFIGURATION ZONE //////////////////////////////

// The slides. Add as many as you like.
var imgsname = new Array()
imgsname[0]="sample1.jpg"
imgsname[1]="sample2.jpg"
imgsname[2]="sample3.jpg"
imgsname[3]="sample4.jpg"

// the links for each slide. 
var imgsurl = new Array()
imgsurl[0]="http://www.fabulant.com"
imgsurl[1]="http://www.fabulant.com"
imgsurl[2]="http://www.fabulant.com"
imgsurl[2]="#"

// Configure the width of the slides (pixels)
var slideshow_width=200

// Configure the height of the slides (pixels)
var slideshow_height=150

// Configure the speed of the transition effect. Less means faster
var pause=80

// Configure the standstill-time of the images (seconds)
var standstill=1500

//////////////////////////// END OF CONFIGURATION ZONE //////////////////////////////

var imgstop=0
var imgsleft=0
document.write("<style type='text/css'>")
document.write(".imgsstyle	{position:absolute;left:-2000px;}")
document.write("</STYLE>")

var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgsname[i]
}
var coverimage = new Array()
coverimage[0]="imgtransq0.gif"
coverimage[1]="imgtransq1.gif"
coverimage[2]="imgtransq2.gif"
coverimage[3]="imgtransq3.gif"
coverimage[4]="imgtransq4.gif"
coverimage[5]="imgtransq5.gif"
coverimage[6]="imgtransq6.gif"
coverimage[7]="imgtransq7.gif"
coverimage[8]="imgtransq8.gif"
var covimgpreload=new Array()
for (i=0;i<=coverimage.length-1;i++) {
	covimgpreload[i]=new Image()
	covimgpreload[i].src=coverimage[i]
}
var i_imgs=0
var i_loop=0
var thisurl=0
var timer
stamdstill=standstill*1000

function init() {
	document.getElementById('imgs').style.top=imgstop
	document.getElementById('imgs').style.left=imgsleft
	document.getElementById('cover').style.top=imgstop
	document.getElementById('cover').style.left=imgsleft
	enlargehearts()
}

function enlargehearts() {
        if (i_loop<=coverimage.length-1) {   
 			imgcover.src=coverimage[i_loop]
            i_loop++
            timer= setTimeout("enlargehearts()",pause)  
        }
        else {
            clearTimeout(timer)
            i_loop--
            timer= setTimeout("shrinkhearts()",standstill)
       }
}

function shrinkhearts() {
        if (i_loop>=0) {  
			imgcover.src=coverimage[i_loop]
            i_loop--
            timer= setTimeout("shrinkhearts()",pause)
        }
        else {
            clearTimeout(timer)
            i_loop=0
            i_imgs++
            
            if (i_imgs>=imgsname.length) {i_imgs=0}
            imgsback.src=imgsname[i_imgs]
            timer= setTimeout("enlargehearts()",(4*pause))
        }
}

function gotourl() {
	document.location.href=imgsurl[i_imgs]
}

document.write("<div ID='roof' style='position:relative; width:"+slideshow_width+"px; height:"+slideshow_height+"px;'>")
document.write("<span ID='imgs' class='imgsstyle'><img width="+slideshow_width+" height="+slideshow_height+" name='imgsback' src='"+imgsname[0]+"' border=0 target='_blank'></span>")

document.write("<span ID='cover' class='imgsstyle'><a href='javascript:gotourl()'><img width="+slideshow_width+" height="+slideshow_height+" name='imgcover' src='stripes0.gif' border=0 target='_blank'></a></span>")
document.write("</div>")

window.onload=init
</script>

Step 2: Go to the top of the script and configure the images, the speed, the width and the height of your slideshow.

Step 3: Save the 9 images (below). Put them all into the same folder as your HTML-file. Do not change their names.