Sliding Stripes Slideshow - Fun of Javascript

» 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

Sliding Stripes Slideshow
Free JavaScript slideshow with unique crossbrowser transition effect! Add as many images as you like. Each image can be linked and has a message of its own. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Install it

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

<style>
.messagestyle{
	font-family:Arial;
	font-size:11px;
	color:white;
	background-color:#888888;
	text-align:center;
	position:absolute;
}
</style>

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

////////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
////////////////////////////////////////////////////////////////////////////

// The URLs of your images. You may add as many images as you like
var imgurl=new Array("sample1.jpg", "sample2.jpg", "sample3.jpg", "sample4.jpg")

// The messages corresponding to the images above
var message=new Array("Hi Mary, how are you?", "Do you know Gina?", "She is the sister of Maureen", "I have forgotten her Name, sorry!")

// The links corresponding to the images above
var imglink=new Array("http://www.hotscripts.com", "http://www.yahoo.com", "http://www.google.com", "http://www.hotscripts.com")

// Standstill of the images (seconds)
var standstill=3

// Width of slideshow (pixels)
var slideshow_width=200

// Height of slideshow (pixels)
var slideshow_height=150

// Height of the messagebox (pixels)
var messagebox_height=15

// The number of pieces within one row
var x_slices=100

////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////

// Do not change the variables below

// horizontal position of the slideshow: distance to the left margin of the window
var x_finalpos=0

// vertical position of the slideshow: distance to the top margin of the window
var y_finalpos=0

// The number of rows of pieces
var y_slices=1

var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgurl[i]
}
var imgheight
var imgwidth
var screenheight
var screenwidth
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=20
var i_image=1
var i_wholeimage=1
var width_slice
var height_slice
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var pause=10
var stretchpause=pause
var stretchfactor=1.15
standstill=1000*standstill

function initiate() {
	screenheight=document.body.clientHeight/3
	screenwidth=document.body.clientWidth/3
	width_slice=Math.floor(imgwidth/x_slices)
	height_slice=Math.floor(imgheight/y_slices)
	cliptop=0
	clipbottom=height_slice
	clipleft=0
	clipright=width_slice
	i_loop=0
	spancounter=0
 	    for (i=0;i<=y_slices-1;i++) {
			for (ii=0;ii<=x_slices-1;ii++) {
				var thisspan=eval("document.getElementById('span"+spancounter+"').style")

thisspan.left=20*spancounter
				thisspan.top=0
                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
				clipleft+=width_slice
		        clipright+=width_slice
		        spancounter++
			}
        	clipleft=0
	        clipright=width_slice
	        cliptop+=height_slice
	        clipbottom+=height_slice
		}
   explode_IE()

}

function addmessage() {
	document.getElementById("messagebox").innerHTML=message[i_wholeimage]
	var timer=setTimeout("changeimage()",standstill)
}

document.write("<div style='position:relative;width:"+slideshow_width+"px;height:"+(slideshow_height+messagebox_height)+"px;overflow-x:hidden'>")
	document.write("<div id='wholepic' style='position:absolute;width:"+slideshow_width+"px;height:"+slideshow_height+"px;left:0px;top:0px'>")
	document.write("<a href='"+imglink[0]+"' target='_top'><img src='"+imgurl[0]+"' border=0></a>")
	document.write("</div>")
	for (i=0;i<=y_slices-1;i++) {
		for (ii=0;ii<=x_slices-1;ii++) {
    		document.write("<span id='span"+spancounter+"' style='position:absolute;left:-5000px'></span>")
			spancounter++
		}
	}
	
	document.write("<div id='messagebox' class='messagestyle' style='width:"+slideshow_width+"px;height:"+messagebox_height+"px;left:0px;top:"+slideshow_height+"px;'>")
	document.write(message[0])
	document.write("</div>")
	
	document.write("</div>")
	spancounter=0

window.onload=changeimage
// - End of JavaScript - -->
</script>

Step 2: Open your webpage. Go to the top of the code and configure the style of the messagebox, the url of images, the width and the height of your slideshow.