Magic Magnet 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

Magic magnet slideshow: new version with opacity effect
Add a little magic to your image-presentation! 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. Each image has a message of its own. You may add a link to each message (comment). Crossbrowser: Internet Explorer 6x/7x/8x/9x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x/9x/10x.

Demo classic version without opacity effect

Install it

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

<style>

/* Set the horizontal alignement, background-color, transparency and padding for the comment-box */
.textboxstyle {
	text-align:center;
	background-color:#666666;
	opacity:0.8; /* Set the transparency for Firefox, Opera and Google Chrome */
	padding:1px;
}

/* Set the border and shadow around the slideshow */
.borderandshadowstyle {
	/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 8px #818181;

/* shadow for Safari and Chrome */
	-webkit-box-shadow: 5px 5px 8px #818181;

/* shadow for Opera */
	box-shadow: 5px 5px 5px #818181;

/* border for all browsers */
	border-style:solid;
	border-width:1px;
	border-color:white;
}

/* Set the vertical alignement for the comment-box (bottom, middle or top) */
.textverticalposition {
	vertical-align:bottom;
}

/* Set the font-attributes for the comment-box */
a.textstyle {
	font-family: Arial;
	font-size:10pt;
	font-weight:normal;
	color:white;
	text-decoration:none;
}

/* Set the font-attributes for the comment-box */
a.textstyle:hover {
	font-family: Arial;
	font-size:10pt;
	font-weight:normal;
	color:yellow;
	text-decoration:none;
}

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

var picture= [

////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
////////////////////////////////////////////////////////////////////////////

// Set the URLs of images, the links and comments below
// Add as many pictures a you like
// Each image requires a block, as shown below:
// {
// imgsrc : "http://www.the-url.com/of/your/image.jpg",
// linkto : "http://www.where-you-go-if-you-click-on-the big-image.com",
// comment : "the comment below the image",
// }, each block ends with a comma (exception: the very last block)

{
imgsrc : "../../pics/300x180bluefish.jpg",
linkto : "http://www.hotscripts.com",
comment : "Let's go fishing » "
}, // comma required

{
imgsrc : "../../pics/300x180bonbons.jpg",
linkto : "http://www.hotscripts.com",
comment : "Not as sweet as you » "
}, // comma required

{
imgsrc : "../../pics/300x180butterfly.jpg",
linkto : "http://www.hotscripts.com",
comment : "Fly away, my little butterfly » "
} // NO comma required

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

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

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

// Number of rows of pieces
var y_slices=8

// Number of pieces within one row
var x_slices=8

////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////

// Do not edit below this line

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

var imgpreload=new Array()
for (i=0;i<=picture.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=picture[i].imgsrc
}
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=new Array()
var max_loop_total=0
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=20
var fadestrength=100
var fadestrength_debris=0
standstill=1000*standstill

i_loop++
		var timer=setTimeout("explode_IE()",pause)
	}
	else {
		spancounter=0
		clearTimeout(timer)
		document.getElementById("wholepic").innerHTML="<img src='"+picture[i_wholeimage].imgsrc+"' border=0>"
		addmessage()
	}
}

function addmessage() {
	document.getElementById("messagebox").innerHTML="<a class='textstyle' href='"+picture[i_wholeimage].linkto+"' target='_top'>"+picture[i_wholeimage].comment+"</a>"
	messageopacityin()
}

function messageopacityin() {
	if (fadestrength<=100) {
		if (document.all) {
			var thisfilter=eval("roofmessage")
			thisfilter.filters.alpha.opacity=Math.round(fadestrength)
		}
		else {
			var thiss=eval("document.getElementById('roofmessage').style")
			thiss.opacity=(fadestrength/100)
 		}
		fadestrength+=10
		var timer=setTimeout("messageopacityin()",50)
	}
	else {
		clearTimeout(timer)
		fadestrength=100
		var timer=setTimeout("changeimage()",standstill)
	}
}

document.write("<div id='roofdiv' class='borderandshadowstyle' style='position:relative;width:"+slideshow_width+"px;height:"+slideshow_height+"px;overflow:hidden'>")
	document.write("<div id='wholepic' style='position:absolute;width:"+slideshow_width+"px;height:"+slideshow_height+"px;left:0px;top:0px'>")
	document.write("<img src='"+picture[0].imgsrc+"' border=0>")
	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;filter:alpha(opacity=1);opacity:100;'></span>")
			spancounter++
		}
	}
	
	document.write("<div id='roofmessage' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;overflow:hidden;filter:alpha(opacity=100);'><table cellpadding=0 cellspacing=0 width="+slideshow_width+" height="+slideshow_height+"><tr><td class='textverticalposition'><div id='messagebox' class='textboxstyle' style='width:"+slideshow_width+"px;'><a class='textstyle' href='"+picture[0].linkto+"' target='_top'>"+picture[0].comment+"</a></div></td></tr></table>")
	document.write("</div>")
	
	document.write("</div>")
	spancounter=0

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

Step 2: Go to the top of the style-code and configure the style of the messages.

Step 3: Go to the top of the script-code and configure the url of images, the speed, the width, the links and the size of the slideshow and the height of the messagebox.