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

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.

Survey Software

Create your own fully customized web based Surveys. Only $39.00

Global Warming

View results

View all Polls

Run Polls on your site. Click here

Proudly hosted by LinuxHostingPlans.com

Subscribe to our periodical newsletter and receive notifications of Perl Script updates, new CGI Script releases and Special discounted offers. Existing Subscribers log in here.
		HTML	Plain text