chrissp26
asked on
Next and previous images cycling using an array
Hello,
I'm trying to write a bit of javascript that will allow me to cycle through a number of images without refreshing page. The only problem is i don't know enough to do it properly.
I have written the following code:
<script type="text/javascript">
<!--
var imgArray = new Array();
imgArray[0] = "DSCF2169.JPG";
imgArray[1] = "DSCF2205.JPG";
imgArray[2] = "DSCF2213.JPG";
document.write(imgArray[0] );
//-->
</script>
<a href="#" onClick="document.getEleme ntById('th umbnailIma ge').src = '/img/contentImages/2/141/ lrg/' + imgArray[0]"><img src="/img/common/back.gif" width="20" height="19" border="0" alt=""></a>
<a href="#" onClick="document.getEleme ntById('th umbnailIma ge').src = '/img/contentImages/2/141/ lrg/' + imgArray[1]"><img src="/img/common/next.gif" width="10" height="19" border="0" alt=""></a>
<img src="/img/contentImages/2/ 141/lrg/DS CF2169.JPG " width="50" height="57" border="0" alt="" id="thumbnailImage">
It uses an array which contains the image names, and an image name with the ID as thumbnailImage.
I need that image to change when the arrows (next and previous) are clicked. Those images need to cycle through the array so that each image is displayed in turn.
I would be grateful for any help anyone can provide.
Kindest regards
Chris
I'm trying to write a bit of javascript that will allow me to cycle through a number of images without refreshing page. The only problem is i don't know enough to do it properly.
I have written the following code:
<script type="text/javascript">
<!--
var imgArray = new Array();
imgArray[0] = "DSCF2169.JPG";
imgArray[1] = "DSCF2205.JPG";
imgArray[2] = "DSCF2213.JPG";
document.write(imgArray[0]
//-->
</script>
<a href="#" onClick="document.getEleme
<a href="#" onClick="document.getEleme
<img src="/img/contentImages/2/
It uses an array which contains the image names, and an image name with the ID as thumbnailImage.
I need that image to change when the arrows (next and previous) are clicked. Those images need to cycle through the array so that each image is displayed in turn.
I would be grateful for any help anyone can provide.
Kindest regards
Chris
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect thanks for your help!
Kindest regards
Chris
Kindest regards
Chris
<html>
<head>
<script src="images.js"></script>
<script>
var cnt = 0;
var speed = 3; // seconds
// ------------- no editing needed below ---------------------
var tId = "";
function loadIt(dir) {
if (dir == null) dir = 1;
cnt+=dir;
if (cnt >= myImages.length) cnt = 0; // wrap
if (cnt < 0) cnt = myImages.length-1; // wrap
document.images['big'].src
document.images['big'].tit
setMessage(myDesc[cnt])
}
function setMessage(txt) {
document.getElementById('m
}
function slide(jump) {
stopIt();
loadIt();
if (!jump) tId = setInterval('loadIt()',spe
return false;
}
function stopIt() {
clearInterval(tId);
return false;
}
function jumpTo(idx) {
cnt=idx-1;
slide(); // change slide(); to slide(1); to just jump and stop
return false;
}
function getImages() {
text ="";
text += '<div style="float:left;"><br><b
for (var i=0;i<myImages.length;i++)
text += '</div>';
text += '<div style="text-align:center; float:center">';
text +='[<a href="#" onClick="return slide()">Start</a>]';
text +='[<a href="#" onClick="return stopIt()">Stop</a>]';
text +='[<a href="#" onClick="return loadIt(-1)">Prev</a>]';
text +='[<a href="#" onClick="return loadIt(1)">Next</a>]<br>';
text += '<div id="msg" class="style4"></div>';
text += '<img src="'+imagePath+myImages[
text +="</div>";
return text;
}
// ------------- no editing needed above ---------------------
</script>
</head>
<body onLoad="setMessage(myDesc[
<div align="center">
<script>
document.write(getImages()
</script>
</body>
</html>
where images.js is
var imagePath = 'images/';
var myImages = new Array(
"foto13_th.jpg",
"foto16_th.jpg",
"foto1_th.jpg",
"foto2_th.jpg",
"foto3_th.jpg",
"foto4_th.jpg",
"foto5_th.jpg",
"foto8_th.jpg"
)// note the lack of comma on the last
var myDesc = new Array(
"foto13.jpg",
"foto16.jpg",
"foto1.jpg",
"foto2.jpg",
"foto3.jpg",
"foto4.jpg",
"foto5.jpg",
"foto8.jpg"
); // note the lack of comma on the last