Dissolve: JavaScript slideshow width special transition animation

Dissolve: JavaScript slideshow width special transition animation
Add an eyecatching transition aninmation to your slideshow. This JavaScript visual effect requires almost no configuration. Works with IE5x/6x/7x/8x, FF2x/3x/4x, Opera 6x/7x/8x/9x/10x, Chrome 3x/4x.

Brought to you by www.fabulant.com

Configuration

Step 1: Open the webpage that will display your slideshow. Insert the following code where you wish to place your slideshow

<script>

// CREDITS:
// Dissolve: JavaScript slideshow with special transition animation
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

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

// The width of your images (pixels)
var imgwidth=200

// The height of your images (pixels)
var imgheight=150

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="sample1.jpg"
imgname[1]="sample2.jpg"
imgname[2]="sample3.jpg"
imgname[3]="sample4.jpg"

// Links (URLs) corresponding to the images above
// images without links should be marked with a "#" instead of a URL
var imgurl=new Array()
imgurl[0]="http://www.fabulant.com"
imgurl[1]="http://www.fabulant.com"
imgurl[2]="#"
imgurl[3]="http://www.fabulant.com"

// Number of sliced cells (the higher this number the slower the visual effect)
var x_slices=16

// Number of sliced rows (the higher this number the slower the visual effect)
var y_slices=8

// Standstill between the images (microseconds)
var pause=2500

// Do not edit the lines below
var x_finalpos=0
var y_finalpos=0
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}
var xy_slices=x_slices*y_slices
var randomorder=new Array()
for (i=0;i<=xy_slices-1;i++) {
	randomorder[i]=i
}

var speed=10
var i_images=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0

function dissolveimg() {
	if (i_loop<=xy_slices-1) {
		var thisspan=eval("span"+randomorder[i_loop])
		thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
		i_loop++
		var timer=setTimeout("dissolveimg()",speed)
	}
	else {
		clearTimeout(timer)	
		var timer=setTimeout("changeimage()",pause)
	}
}

function changeimage() {
	getrandomorder(xy_slices)
	i_loop=0
	i_images++
	if (i_images>=imgname.length) {i_images=0}
   	dissolveimg()
}

function getrandomorder(range) {		
	for (i=0;i<=range;i++) {
		var firstvalue= Math.floor(range*Math.random())
		var secondvalue= Math.floor(range*Math.random())
		var cachevalue=randomorder[firstvalue]
		randomorder[firstvalue]=randomorder[secondvalue]
		randomorder[secondvalue]=cachevalue
	}
}

document.write('<style>')
document.write('.spanstyle {position:absolute;left:-5000px;}')
document.write('</style>')

document.write('<div style="position:relative;width:'+imgwidth+';height:'+imgheight+';">')
for (i=0;i<=y_slices-1;i++) {
	for (ii=0;ii<=x_slices-1;ii++) {
    	document.write("<div id='span"+spancounter+"' class='spanstyle'>")
    	document.write("</div>")
		spancounter++
	}
}
document.write('</div>')

window.onload=initiate
</script>

Step 2: Go to the very first line of the code you have added and set the images, width, height and links of the slideshow