DHTML Magic Magnet Slideshow Code Snippet

DHTML Magic Magnet Slideshow Code Snippet
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 web page. 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.
// Additional scripts can be found at http://www.fabulant.com & http://www.designerwiz.com.
// info@24fun.com
// 8/16/2001

// 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("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 web page. 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!

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: