Link to home
Start Free TrialLog in
Avatar of chrissp26
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.getElementById('thumbnailImage').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.getElementById('thumbnailImage').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/DSCF2169.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
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

How about this

<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 = imagePath+myImages[cnt].replace('_th','');
    document.images['big'].title = myDesc[cnt];
    setMessage(myDesc[cnt])

  }
  function setMessage(txt) {
    document.getElementById('msg').innerHTML = txt;
  }
  function slide(jump) {
    stopIt();
    loadIt();
    if (!jump) tId = setInterval('loadIt()',speed*1000)
    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><br><div style="text-align:center; height:400; width:120; overflow:scroll">';
    for (var i=0;i<myImages.length;i++) text += ' <img src="'+imagePath+myImages[i]+'" onClick="jumpTo('+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[0].replace('_th','')+'" name="big" onError="setMessage(\'Could not load \'+ myDesc[0])">\n<br>';
    text +="</div>";
    return text;
  }

  // ------------- no editing needed above ---------------------

  </script>
</head>

<body onLoad="setMessage(myDesc[0])">
<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

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of chrissp26
chrissp26

ASKER

Perfect thanks for your help!

Kindest regards

Chris