Free JavaScript carousel slideshow with zoom and transparency effect

» 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

Carousel slideshow with zoom onmouseover
Free JavaScript carousel slideshow with rollover-zoom. You may add as many images as you like. You may even add a backgroundimage. Each picture can display a comment and can be linked to a separate URL. Browsers: Internet Explorer 6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x

Configuration:

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

<style>
.textstyle {
position:absolute;
visibility:visible;
border-style:solid;
border-width:2px;
border-color:#EEEEEE;
font-family:Arial;
font-size:8pt;
color:#FFFFFF;
text-align:center;
background-color:#CCCCCC;
top:-1000px;
}
</style>

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

var rotatingimage=new Array()
var rotatingtext=new Array()
var rotatinglink=new Array()

///////////////////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION ZONE 
//////////////////////////////////////////////////////////////////////////////////////

// Set the path and name (or URL) of your images. Add as many images as you like
// Take care that the images have a decent resolution as they are used for the zoom-images as well
rotatingimage[0]="../../pics/300x180bluefish.jpg"
rotatingimage[1]="../../pics/300x180bonbons.jpg"
rotatingimage[2]="../../pics/300x180butterfly.jpg"
rotatingimage[3]="../../pics/300x180fruitshop.jpg"
rotatingimage[4]="../../pics/300x180herbstwald.jpg"
rotatingimage[5]="../../pics/300x180castle.jpg"
rotatingimage[6]="../../pics/300x180kleeblaetter.jpg"
rotatingimage[7]="../../pics/300x180lemons.jpg"
rotatingimage[8]="../../pics/300x180tree.jpg"

// Set the the comments corresponding to the images above (requires the same amount as images!)
rotatingtext[0]="Deep blue"
rotatingtext[1]="Not as sweet as you"
rotatingtext[2]="Fly, butterfly, fly"
rotatingtext[3]="Fruit Paradise"
rotatingtext[4]="Lost in the forrest"
rotatingtext[5]="My castle is my home"
rotatingtext[6]="This is my lucky day"
rotatingtext[7]="John Lemon"
rotatingtext[8]="Free the tree"

// Set the the comments corresoponding to the images above (requires the same amount as images!)
// Set "#" if no link is required
rotatinglink[0]="http://www.hotscripts.com"
rotatinglink[1]="http://www.hotscripts.com"
rotatinglink[2]="http://www.hotscripts.com"
rotatinglink[3]="http://www.hotscripts.com"
rotatinglink[4]="http://www.hotscripts.com"
rotatinglink[5]="http://www.hotscripts.com"
rotatinglink[6]="http://www.hotscripts.com"
rotatinglink[7]="http://www.hotscripts.com"
rotatinglink[8]="http://www.hotscripts.com"

// Set the width of the circle (pixels)
var circlewidth=420

// Set the height of the circle (pixels)
var circleheight=240

// Set the width of your small rotating images (pixels)
var imgwidth=150

// Set the height of your small rotating images (pixels)
var imgheight=90

// Set the height of your textbox (pixels). This is the textbox (comment) below the rotating images
var textboxheight=17

// Set the path and name (or URL) of your backgroundimage
// Write "var bgimg=false" if you don't want to add a backgroundimage
var bgimg="../../pics/abendstimmung.jpg"

// Set the number of words that will be displayed at once
var displaymax=7

// Set the speed! Tha values may range from 0.1 to 1.0
var step=0.02;

// Set the zoomfactor for the big picture that appears on mouseover
var zoomfactor=2;

// padding to the margin
var imgpadding=10

/////////////////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION ZONE
// Do not edit below this line	
////////////////////////////////////////////////////////////////////////////////////

var maxopacity=new Array()
var i_imgcounter=0
var segment=360/(displaymax);
var decrement=0;
var op
var tmr
var opacitystep=Math.round(100/circleinnerheight)
var zoomobj
var twidth
var theight
var windowwidth
var windowheight
var circleinnerwidth=circlewidth-(imgwidth+2*imgpadding)
var circleinnerheight=circleheight-(imgheight+2*imgpadding)
circleinnerwidth=circleinnerwidth/2
circleinnerheight=circleinnerheight/2

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

var preloadedimages=new Array()
for (i=0;i<rotatingimage.length;i++){
	preloadedimages[i]=new Image()
	preloadedimages[i].src=rotatingimage[i]
}

for (i=0;i<displaymax;i++) {
	maxopacity[i]=1
}

function getpagesize() {
	windowwidth=parseInt(document.body.clientWidth)
	windowheight=parseInt(document.body.clientHeight)
	twidth=Math.floor(circleinnerwidth)
	theight=Math.floor(circleinnerheight)
	i_imgcounter=0
	
	for (i=0; i<displaymax; i++) {
		var thisspan=eval("document.getElementById('span"+i+"').style")
		thisspan.left=twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding;
		thisspan.top=theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding;
		thisspan.zIndex=parseInt(thisspan.top)

op=parseInt(100/circleinnerheight*(parseInt(thisspan.top)*0.5))
		document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
	document.getElementById('span'+i).style.visibility="visible"
			maxopacity[i]=-1
			i_imgcounter++
		if (i_imgcounter>=rotatingimage.length) {
			i_imgcounter=0
		}
	}
	
	rotatetext()
}

function rotatetext() {
	for (i=0; i<displaymax; i++) {
		var thisspan=eval("document.getElementById('span"+i+"').style")
		thisspan.left=twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding;
		thisspan.top=theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding;
		thisspan.zIndex=parseInt(thisspan.top)

op=parseInt((100/circleinnerheight*(parseInt(thisspan.top)*0.5))-imgpadding)
		
		if (op<5 && maxopacity[i]==1) {
			if (i_imgcounter>=rotatingimage.length) {
				i_imgcounter=0
			}
			document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
	document.getElementById('span'+i).style.visibility="visible"
			maxopacity[i]=-1
			i_imgcounter++
		}
		if (op>90) {
			maxopacity[i]=1
		}
		var thisfilter=eval("span"+i)
		
		if (ie) {
			thisfilter.filters.alpha.opacity=op
		}
		else {
			thisspan.opacity=op/100
		}
	}
	decrement-=step;
	tmr=setTimeout('rotatetext()', 50);
}

function stoprotating(thisobj) {
	clearTimeout(tmr)
	zoomobj=thisobj
	zoomobj.width=zoomfactor*imgwidth
	zoomobj.parentNode.parentNode.style.width=zoomfactor*imgwidth
	zoomobj.parentNode.parentNode.style.zIndex=9999
	if (ie) {
		zoomobj.parentNode.parentNode.filters.alpha.opacity=100
	}
	else {
		zoomobj.parentNode.parentNode.style.opacity=1
	}
}

function restartrotating() {
	zoomobj.width=imgwidth
	zoomobj.parentNode.parentNode.style.width=imgwidth
	rotatetext()
}

Step 2: Go to the of the style-code and configure the text-style between the <style>-tags.

Step 3: Go to the top of the script and configure pictures, messages, links, size and speed.