add prev/next toggles to onclick image gallery

Question

I have several onclick image galleries, where the next image loads when the user clicks on the image. It's not very obvious as is and I would like to add "next" and "prev" toggles.

I have read many threads about it but I am not familiar enough with javascript to apply general advice to my specific code (which I don't fully understand).

So I was hopping to get specific advice on how to edit my javascript function.

this is the function:

 function ImageCollection(images) {
     this.images = images;
     this.i = 0;
     this.next = function(img) {
     this.i++;
     if (this.i == images.length)
         this.i = 0;
         img.src = images[this.i];
     }
 }

with an example of image array:

var ic1 = new ImageCollection(['icono/antithese/preview.jpg','icono/antithese/preview2.jpg','icono/antithese/preview2.jpg',}

that I call like this in my html:

<img src="icono/antithese/preview.jpg" onclick="ic1.next(this)" >

Also it only goes one way, which is fine for the onclick function, but I would still like to learn how to make it go back and forth when using the toggles.

Thank you for your help and attention (I hope I phrased this clearly, if not please ask me and I'll try to be more precise!)

Answer 1

function ImageCollection(images) {
     this.images = images;
     this.i = 0;
     this.next = function(imgId) {
     var img = document.getElementById(imgId);
     this.i++;
     if (this.i == images.length )
         this.i = 0;
         img.src = images[this.i];
     }
     this.prev = function(imgId) {
     var img = document.getElementById(imgId);
     this.i--;
     if (this.i <= 0)
         this.i = images.length -1;
         img.src = images[this.i];
     }
 }

Then you need to add two buttons below the image holder.

<img id='container' src="icono/antithese/preview.jpg" >
<input type='button' value='next' onclick='ic1.next("container")' />
<input type='button' value='prev' onclick='ic1.prev("container")' />

Now when you click the buttons it will move forward or backward.

Here is a fiddle

---

You mentioned you don't fully understand what the code is doing so I offer this explanation:

First you are creating an object constructor named ImageCollection which takes a parameter named images. Next you are assigning the assumed 'array' of images to a member of that object named images. Next you are creating a member named i to keep track of the place in the array that you currently are.

The next two members are functions named next and prev. These functions take a single parameter that is the id of a container for the images.

Each of these functions does 4 things:

1. Get a reference to the container object using the passed in id.
2. Increments/Decrements the internal tracking member i.
3. Makes sure that the value of i will fall in the range of the array, that is to say there will be an element at position i. If there won't be, meaning you have gone past the end of the array or before the beginning of the array, then i is reset so that it will be either the end or beginning of the array depending on which direction you are traveling.
4. Sets the source of the container to the value in the image array that matches i.

Now if you wanted to get really fancy you could make a pause play functionality for it also ensuring each function stops the automatic play. To do this look into the 'setTimeout' and 'clearTimeout' javascript functions.