MagicMagnet Slideshow

MagicMagnet Slideshow
Add a little magic to your image-presentation! First you will see only the debris of your image randomly spread out all over the screen. Then those scattered image-pieces will be drawn together by a strong magnetic force until the image has been rebuilt out of those debris! Add as many images as you like. Made for IE4 and higher.

Install it

Step 1: Open your webpage. Paste the following code right above the </body> tag:

// CREDITS:
// Slideshow MagicMagnet by Peter Gehrig and Urs Dudli
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.

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

// The URLs of your images. You may add as many images as you like
var imgurl=new Array("pic1.jpg", "pic2.jpg", "pic3.jpg")

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

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

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

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

// Do not change the variables below
var x_slices=6
var y_slices=4
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=0
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
standstill=1000*standstill

if (document.all) {
	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++
		}
	}
	spancounter=0
}

if (document.all) {window.onload=changeimage}
// - End of JavaScript - -->
</script>

Step 2: Open your webpage. Go to the top of the script and configure the URLS of your images as well as the position of the slideshow.

Step 3: Have fun!

Click here to download files