Free Javascript SlideShow Script with zoom in and out

JavaScripts :: Miscellaneous :: Slide Show

The Slide Show Script

Scroll to the bottom of this page for the source code required for the Slide Show script. It contains configuration instructions. You'll also need to save the images for the toolbar, or create your own. If you do create a cool set of icons and would like to share them with the world (just like we're sharing our code and images with you), please send them to us so we can post them here. Full credit will also be posted upon request.

The tool buttons below allow the visitor to control zoom, back, forward, play and stop the slide show. You can configure the script's transition effects, image sizes and names, and slide duration. By Changing the hidden duration field to a select menu, you can also allow the visitor to select their preferred slide duration.

Alternate set of images provided by Christian Sims

Alternate set of images

Alternate set of images provided by Dale Richmond

Select All De-select

<html>
<head>
<title>Free Javascript SlideShow Script with zoom in and out</title>
</head>
<script>
<!--
/* 
SlideShow. Written by PerlScriptsJavaScripts.com
Copyright http://www.perlscriptsjavascripts.com 
Free and commercial Perl and JavaScripts     
*/

// transition effect. number between 0 and 23, 23 is random effect
effect = 23;

// transition duration. number of seconds effect lasts
duration = 1.5;

// seconds to diaply each image?
display = 4;

// width of stage (first image)
oW = 400;

// height of stage
oH = 300;

// zoom width by (add or subtracts this many pixels from image width)
zW = 40;

// zoom height by 
zH = 30;

// path to image/name of image in slide show. this will also preload all images
// each element in the array must be in sequential order starting with zero (0)
SLIDES = new Array();

SLIDES[0]  = ["/images/js/04b.jpg", "Office"];
SLIDES[1]  = ["/images/js/06b.jpg", "Front left"];
SLIDES[2]  = ["/images/js/07b.jpg", "Back left"];
SLIDES[3]  = ["/images/js/08b.jpg", "Sign"];
SLIDES[4]  = ["/images/js/09b.jpg", "Front left close up"];
SLIDES[5]  = ["/images/js/10b.jpg", "Office color board"];
SLIDES[6]  = ["/images/js/11b.jpg", "Back right"];
SLIDES[7]  = ["/images/js/12b.jpg", "Back middle"];

// end required modifications

S = new Array();
for(a = 0; a < SLIDES.length; a++){
	S[a] = new Image(); S[a].src  = SLIDES[a][0];
}
// -->
</script>

</head>

<body>

<script>
<!--

f = document._slideShow;
n = 0;
t = 0;

document.images["stage"].width  = oW;
document.images["stage"].height = oH;
f.delay.value = display;

// add image numbers to select menu
f.wichIm.options.length = 0;
for(i in SLIDES){
	f.wichIm.options[i] = new Option(SLIDES[i][1],i);
}

function startSS(){
	t = setTimeout("runSS(" + f.currSlide.value + ")", 1 * 1);
}

function stopSS(){
	if(t){
		t = clearTimeout(t);
	}
}

function selected(n){
	stopSS();
	document.images["stage"].src = S[n].src;
	f.currSlide.value = n;
	
	if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
		document.images["stage"].style.visibility = "hidden";
		document.images["stage"].filters.item(0).apply();
		document.images["stage"].filters.item(0).transition = effect;
		document.images["stage"].style.visibility = "visible";
		document.images["stage"].filters(0).play(duration);
	}
}

Plesk Hosting

Linux servers with Plesk Control Panel, cgi-bin, crontab manager, Mysql, PHP and ASP.

Linux Hosting Plans from $9.12 per month, includes Plesk Control Panel, MySQL databases, cgi-bin, crontab manager and 50 email accounts.

Bathroom Hygiene

View results

View all Polls

Run Polls just like this one on your website!

Proudly hosted by LinuxHostingPlans.com

Subscribers log in here. Subscribe to our periodical newsletter for special offers on commercial scripts, hosting, exciting business opportunities, and industry news and events. Our Mailing List Software is powered by Consolidator
		HTML	Plain text