JavaScript 3D-Slideshow, free download

» 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

Free Fun JavaScript 3D-Slideshow
This is a very spectacular free JavaScript and DHTML slideshow. The script makes your images float and rotate through your webpage. Each image can be linked. Selectable form (circle or rectangle). Full effect with Internet Explorer 5x/6x/7x/8x or higher. Standard floating effect with FF2x/3x/4x, Opera 7x/8x/9x/10x, Chrome 3x/4x.

Configuration:

Step 1: Open your webpage. Paste the following code into the head-section of your webpage:

Step 2: Paste the following code right above the </body>-tag of your webpage (almost at the bottom of the webpage):

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

// set the URLs of your images
// add as amy as you like
var slideurl=new Array()
slideurl[0]="pic1.jpg"
slideurl[1]="pic2.jpg"
slideurl[2]="pic3.jpg"

// add a corresponding link for each image
// if you don't wont to link an image, enter "#"
var slidelink=new Array()
slidelink[0]="http://www.altavista.com"
slidelink[1]="#"
slidelink[2]="http://www.google.com"

// add a corresponding target for each link
// acceptable values "_blank" or "_top" or "_parent" or "_self"
var slidetarget=new Array()
slidetarget[0]="_blank"
slidetarget[1]="_self"
slidetarget[2]="_top"

// set the width of the 3D-border (pixels)
var backdepth=6

// set thecolorof the 3D-border (HTML-values required)
var fillcolor="#666666"

// set the standstill (seconds) for the images (required for Netscape Navigator)
var standstill=3

// set the form of the imageframe
// acceptable values are "oval" or "rect"
var imageform="oval"

// do not edit below this line
var slidewidth=1
var slideheight=1

var ns6=document.getElementById&&!document.all?1:0 
var opera=navigator.userAgent.match(/Opera/) 
var ie5=document.getElementById&&document.all&&!opera?1:0

standstill*=1000
var floatingspeed=1
var tempo=20
var numberofimages=slideurl.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommakerNS(floatingspeed)
	stepy[i]=randommakerNS(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
	imgwidth[i]=10
	imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
for (i=0;i<=slideurl.length;i++) {
	i_fadenowmax[i]=2
	i_fadestrength[i]=randommakerNS(99)	
	i_fadestep[i]=1
	i_fadenow[i]=0
}

var spancontent=new Array()
var i_spancontent=0
var imgpreload=new Array()
for (i=0;i<=slideurl.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=slideurl[i]
}
for (i=0;i<=numberofimages;i++) {
	spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a>"
}

var i_angle1=0
var i_size=1
var i_pic=0
var posleft=0
var postop=0
var x_extrusionangle=0
var y_extrusionangle=0
var x_rotationcenter=0
var y_rotationcenter=0
var pagewidth
var pageheight

function initNS() {
    marginbottom=window.innerHeight-11
    marginright=window.innerWidth-11           
	var thisspan=document.getElementById('span0')
	thisspan.innerHTML=spancontent[0]
	var thisspan=document.getElementById('span0')
	imgwidth[0]=parseInt(thisspan.offsetWidth)
	imgheight[0]=parseInt(thisspan.offsetHeight)
	var maxleftstart=marginright-imgwidth[0]
	var maxtopstart=marginbottom-imgheight[0]
	var thisspan=document.getElementById('span0').style
    thisspan.left=parseInt(thisspan.left)+randommakerNS(maxleftstart)
	thisspan.top=parseInt(thisspan.top)+randommakerNS(maxtopstart) 
	thisspan.visibility="visible" 
    checkmovementNS()
}

function randommakerNS(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovementNS() {
	checkpositionNS()
	movepicturesNS()
    timer=setTimeout("checkmovementNS()",tempo)
}

function movepicturesNS() {
    var thisspan=document.getElementById('span0').style
    thisspan.left=parseInt(thisspan.left)+stepx[0]
	thisspan.top=parseInt(thisspan.top)+stepy[0]	
	i_fadenow[0]++
	if (i_fadenow[0]>=i_fadenowmax[0]) {
		i_fadenow[0]=0
		if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1}
		else if (i_fadestrength[0]<=0) {
			i_fadestep[0]=i_fadestep[0]*-1
			i_spancontent++
			if (i_spancontent>=spancontent.length) {i_spancontent=0}
			document.getElementById('span0').innerHTML=spancontent[i_spancontent]
		}
	}	
	i_fadestrength[0]+=i_fadestep[0]
	document.getElementById('span0').style.MozOpacity=Math.round(i_fadestrength[0])/100
}

function checkpositionNS() {
	imgwidth[0]=parseInt(document.getElementById('span0').offsetWidth)
	imgheight[0]=parseInt(document.getElementById('span0').offsetHeight)         
	var thisspan=document.getElementById('span0').style
	var leftx=parseInt(thisspan.left)
	var topy=parseInt(thisspan.top)
	if (leftx>marginright-imgwidth[0]-floatingspeed) {
		thisspan.left=leftx-Math.abs(stepx[0]+1)
		stepx[0]=randommakerNS(floatingspeed)*-1	
	}
	if (leftx<marginleft) {
		thisspan.left=leftx+Math.abs(stepx[0])
		stepx[0]=randommakerNS(floatingspeed)			
	}	
	if (topy>marginbottom-imgheight[0]-floatingspeed) {
		thisspan.top=topy-Math.abs(stepy[0])
		stepy[0]=randommakerNS(floatingspeed)*-1
	}
	if (topy<margintop) {
		thisspan.top=topy+Math.abs(stepy[0])
		stepy[0]=randommakerNS(floatingspeed)
	}
}

function initIE() {
	var i_preload=0
	for (i=0;i<=slideurl.length-1;i++) {
		var imgref=eval("document.n"+i)
		if (imgref.complete) {i_preload++}
	}
	if (i_preload>=slideurl.length-1) {
		slidewidth=document.getElementById('spn1').offsetWidth
		slideheight=document.getElementById('spn1').offsetHeight
		pagewidth=document.body.clientWidth
		pageheight=document.body.clientHeight
		document.getElementById('rectid').style.width=slidewidth
		document.getElementById('rectid').style.height=slideheight
		posleft=(pagewidth-slidewidth)/2
		postop=(pageheight-slideheight)/2
		x_rotationcenter=(posleft/slidewidth)/2
		y_rotationcenter=(postop/slideheight)/2
		var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenter
		document.getElementById('rectid').style.left=posleft
		document.getElementById('rectid').style.top=postop
		document.getElementById('extrusionid').rotationcenter=rotationcenter
		rotateIE()
	}
	else {
		var timer=setTimeout("initIE()",200)
	}
}

function rotateIE() {
	i_angle1+=1
	if (i_angle1>=360) {
		i_angle1=0
	}
	if (i_angle1==127) {
		i_pic++
		if (i_pic>=slideurl.length) {i_pic=0}
		document.getElementById('fillid').src=slideurl[i_pic]
	}
	document.getElementById('rectid').style.rotation=i_angle1
	document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1
	var timer=setTimeout("rotateIE()",30)
}

function openpageIE() {
	if (slidetarget[i_pic]=="_blank") {
		window.open(slidelink[i_pic])
	}
	else if (slidetarget[i_pic]=="_self") {
		document.location.href(slidelink[i_pic])
	}
	else if (slidetarget[i_pic]=="_top" || slidetarget[i_pic]=="_parent") {
		top.location.href(slidelink[i_pic])
	}
}

if (ns6) {
	document.write("<span id='span0' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0'></span>")
    document.close()
	window.onload=initNS
}
if (ie5) {
	document.write('<div id="preloadimages" style="position:absolute;left:0px;top:-5px;visibility:hidden">')
	for (i=0;i<=slideurl.length-1;i++) {
		document.write('<span id="spn'+i+'" style="position:absolute;width:2px;left:0px;top:0px;">')
		document.write('<img src="'+slideurl[i]+'" name="n'+i+'">')
		document.write('</span>')
	}
	document.write('</div>')
   	document.write('<v:'+imageform+' id="rectid"  style="position:absolute;top:0;left:0;width:'+slidewidth+';height:'+slideheight+'" onClick="openpageIE()">')
   	document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" rotationcenter="0,0,0" backdepth="'+backdepth+'" diffusity="2.5" metal="true">')
 	document.write('</v:extrusion>')
document.write('<v:fill id="fillid" opacity="100%" color="'+fillcolor+'" type="frame" src="'+slideurl[0]+'"/>')
   document.write('</v:'+imageform+'>')
	window.onload=initIE
   }
</script>

Step 3: Go to the top of the script and configure images, links, color and width of 3D-border.