Hi Folks,
I've got this code here which scripts a Rotational Image Swapper. It's almost perfect for what I need but the thing is I've got alot of images, around 30 all the same size thumbs.
I'd like to display lets say 3 or 4 and let the swapper change the images as the "person" browses through the site, How could I modify this? If not i'll have to use an Iframe scroller.
PHP Code:
<html>
<head>
</head>
<body onLoad="initScroll();">
<div id="imagediv" style="position:absolute;top:10;left:100;">
<p><a id="img0link" target="_new" href="link1.html"><img id="img0" src="img1.jpg" style="border:0px;" /></a><p />
<p><a id="img1link" target="_new" href="link2.html"><img id="img1" src="img2.jpg" style="border:0px;" /></a><p />
<p><a id="img2link" target="_new" href="link3.html"><img id="img2" src="img3.jpg" style="border:0px;" /></a><p />
<p><a id="img3link" target="_new" href="link4.html"><img id="img3" src="img4.jpg" style="border:0px;" /></a><p />
<p><a id="img4link" target="_new" href="link5.html"><img id="img4" src="img5.jpg" style="border:0px;" /></a><p />
</div>
<script language = "javascript">
var numOfImages = 5;
var initialDelay = 2000; // this is in milliseconds;
var delayBetweenSwap = 2000; // So is this;
var globalCount = 1;
// Initialize these with the total number of images
var imgArray = new Array(5);
var linkArray = new Array(5);
// Fill this arrasy with the image srcs themselves
imgArray[0] = "img1.jpg";
imgArray[1] = "img2.jpg";
imgArray[2] = "img3.jpg";
imgArray[3] = "img4.jpg";
imgArray[4] = "img5.jpg";
// fill this array with the href targets that you want the images to link to
linkArray[0] = "link1.html";
linkArray[1] = "link2.html";
linkArray[2] = "link3.html";
linkArray[3] = "link4.html";
linkArray[4] = "link5.html";
function initScroll() {
/*
Function just initializes the swap routine
*/
var initialRun = setTimeout("doSwap()",initialDelay);
}
function doSwap() {
/*
This is the meat of the swapping routine
*/
/*
First things first, iterate through our images
and change their source and their href
*/
for (var i=0;i<numOfImages;i++) {
var element = document.getElementById("img"+i);
var link = document.getElementById("img"+i+"link");
/*
Have to make sure we wrap around after we reach the max number of images
*/
var nextImg = i + globalCount;
if (nextImg >=numOfImages) {
nextImg = nextImg-numOfImages;
}
/*
Swap images and hrefs
*/
var newImgSrc = imgArray[nextImg];
var newImgLink = linkArray[nextImg];
element.src = newImgSrc;
link.href = newImgLink;
}
if (globalCount > numOfImages) {
globalCount = 0;
}
globalCount++;
setTimeout("doSwap()",delayBetweenSwap);
}
</script>
</body>
</html>
Thanks, |
