0

I have an array of image IDs.

var images = ['238239', '389943', '989238', ... ];
max = images.length;

Array index obviously starts at 0. The array size can vary.

For example. If there are 5 images in the array, the indexes are 0, 1, 2, 3, 4.

I'm swapping the images with Jquery by incrementing the current index like so:

<script>

currindex = 0

// Previous image, onclick event swap
    $("previous").click(function(){
        currindex = (currindex+1) % max;   
        ...some more code to swap image...
    });


// Next image, onclick event swap
    $("next").click(function(){
    currindex = (currindex+max-1) % max;
    ...some more code to swap image...
}

</script>

This allows the images to rotate and begin again at index 0 when user clicks "Next" on last index nr. 4. The same applies to rotating with "Previous".

I want to display a counter of current position like so:

<div>Image 3 of 5</div>

How can I implement the counter which will always begin at 1 at index 0 and will rotate both ways?

DominiqueBal
  • 787
  • 1
  • 7
  • 18
  • Your question doesn't really make sense, specifically: _"always begin at 1 at index 0."_ Why not just add 1 to the index for displaying the "Image X of Y" text? – Matt Ball Mar 11 '12 at 21:18
  • 3
    `$('#someID').text( currindex + 1 );` – JJJ Mar 11 '12 at 21:19

1 Answers1

1
function updateCounter(){
   document.getElementById("counter").innerHTML = "Image "+(currindex+1)+" of "+max;
}

Add some element to your code with the id of "counter", and add the function updateCounter() to both the click events.

Adam
  • 2,204
  • 2
  • 15
  • 15