如何通过将1递增添加到img src使用javascript（jQuery＆iviewer）更改图像？

Question

Checked various questions on SO, but found nothing that quite matches what I'm after...

I'm buildling an image viwer using a combination of jQuery and iViewer . Here's the code that's used to call different images in iviewer:

$("#chimg").click(function()
{
   iv1.iviewer('loadImage', "img/01.jpg");
   return false;
});

As can be seen, I've named the images sequentially. Right now, all the images are called using individual links, one per image, but ideally I'd like to be able to add previous and next image buttons as well.

Since the images are sequentially named, I was wondering if there was a method of calling the next image in a sequence by adding the value of '1' to the current image? Obviously, I'm happy to change the naming conventions of the files if this is necessary.

(Disclaimer: I'm a fast learner, but I'm also new to javascript. Solutions that are talked through would really be preferred...)

Answer 1

This should do the trick...

var i = 0;

$("#chimg").click(function()
{
    i++;
    iv1.iviewer('loadImage', "img/" + ("0" + i).slice(-2) + ".jpg");
    return false;
});

This...

("0" + i).slice(-2)

...adds 0 to the beginning of whatever value is stored in i and then takes the last 2 characters, so you've got your 0 padded number.

Answer 2

i have never used iViewer before but first option off the top of my head is can you get the 'src' attribute for the img? if you have the source you can get the number via regular expression

var src = $('#chimg').attr('src');
var m = parseInt(src.match(/\d+/g));
n = m+1;
src = src.replace(m, n);
iv1.iviewer('loadImage', src);

then whatever else you have to do.

see it work