[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 272
  • Last Modified:

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
0
chrissp26
Asked:
chrissp26
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
Or to just answer your question

<script type="text/javascript">
<!--
var imagePath = '/img/contentImages/2/141/lrg/';
var imgArray = new Array();
imgArray[0] = "DSCF2169.JPG";
imgArray[1] = "DSCF2205.JPG";
imgArray[2] = "DSCF2213.JPG";
var cnt=0;
function changeIt(dir) {
  cnt += dir;
  if (cnt >= imgArray.length) cnt = 0; // wrap
  if (cnt < 0) cnt = imgArray.length-1; // wrap  
  document.getElementById('thumbnailImage').src = imagePath + imgArray[cnt]
  return false;
}

//-->
</script>

<a href="#" onClick="return changeIt(-1)"><img src="/img/common/back.gif" width="20" height="19" border="0" alt=""></a>
<a href="#" onClick="return changeIt(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">
0
 
chrissp26Author Commented:
Perfect thanks for your help!

Kindest regards

Chris
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now