Page 1 of 1

JAVASCRIPT image rotator... fade between images

Posted: Tue Jun 05, 2007 10:14 am
by yabud
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hey everyone

I currently have the following javascript which loops through some images. I want to add a function so that the images fade into each other. Can anyone help me with this please? Below is my current code.
[syntax="html"]
<html>

	<head>
		<title>Image Rotation</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

gSlideshowInterval = 4;
gNumberOfImages = 12;

gImages = new Array(gNumberOfImages);
gImages[0] = "/test/images/accolades_pics/2004_deloitte.jpg";
gImages[1] = "/test/images/accolades_pics/2004_tambro.jpg";
gImages[2] = "/test/images/accolades_pics/2004_scotiabank.jpg";
gImages[3] = "/test/images/accolades_pics/2005_deloitte.jpg";
gImages[4] = "/test/images/accolades_pics/2005_deloitte2.jpg";
gImages[5] = "/test/images/accolades_pics/2005_devlan.jpg";
gImages[6] = "/test/images/accolades_pics/2005_lex.jpg";
gImages[7] = "/test/images/accolades_pics/2005_tambro.jpg";
gImages[8] = "/test/images/accolades_pics/2006_linamar.jpg";
gImages[9] = "/test/images/accolades_pics/2006_scotiabank1.jpg";
gImages[10] = "/test/images/accolades_pics/2006_sutherland.jpg";
gImages[11] = "/test/images/accolades_pics/2006_tambro1.jpg";


function canManipulateImages() {
	if (document.images)
		return true;
	else
		return false;
}
function loadSlide(imageURL) {
	if (gImageCapableBrowser) {
		document.slide.src = imageURL;
		return false;
	}
	else {
		return true;
	}
}
function nextSlide() {
	gCurrentImage = (gCurrentImage + 1) % gNumberOfImages;
	loadSlide(gImages[gCurrentImage]);
}
gImageCapableBrowser = canManipulateImages();
gCurrentImage = 0;
setInterval("nextSlide()",gSlideshowInterval * 1000);
// 
</SCRIPT>
	</head>
	<body>
<P ALIGN=left><IMG SRC="/test/images/accolades_pics/2006_scotiabank1.jpg" BORDER=0 ALT="SWEEET" NAME="slide"></a></P>


	</body>
</html>

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Jun 06, 2007 3:22 am
by Kieran Huggins
check out a library that does it for you. jQuery comes to mind... but there are lots of others. Search for "jQuery interface" for a good set of UI tools