Switch to next image in array?

JavaScript
1

I have 9 images.

How do I make it so that when one image is clicked, it switches to a new image?

I was thinking that If I stored the images into an array, can I make a function that changes the src of the image to the next element in the array?

<script>
var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/1.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'images/2.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'images/3.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'images/4.jpg';


function nextImage(element)
{
var img = document.getElementById(Dynamic_Image);

    for(var i = 0; i < imgArray.length;i++)
    {
    if(imgArray[i].src == img.src) // << 
    {
        if(i === imgArray.length){
            document.getElementById(element).src = imgArray[0].src;
            break;
        }
        document.getElementById(element).src = imgArray[i+1].src;
        break;
    }
}
}

`
then in the HTML have,

<img src"images/1.jpg" id="Dynamic_Image">

is that ok?

2

Hi there lukeurtnowski,

try it like this…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body> 

<img id="dynamic-image" src="images/1.jpg" alt="">
 
<script>
(function() {
   'use strict';

   var preloads=[],c;


function preload(){

for(c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
   c=0;

 }
preload('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg',
        'images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg');

   document.getElementById('dynamic-image').addEventListener('click',
function() {
   c++;
if(c==preloads.length) {
   c=0;
 }
   this.src=preloads[c].src;
 });
})();
</script>
</body>
</html>

coothead

3

thanks for your help, im kind of lost though, anyway you can comment whats happening in the 3 functions?

4

The three functions are a wrapper, preloader, and image changer.

The wrapper is this part:

(function () {
    ...
}());

You’ll note that his code ends with })(); while mine ends with }());
They both achieve the same objective of invoking the function, but his ends up invoking the enclosing parenthesis, while mine behaves more like how we normally invoke functions.

The difference can be seen more clearly with the following example:

var wrapper = function () {
    ...
};
(wrapper());
(wrapper)();

It makes more consistent sense for the invoking parenthesis to be on the function, rather than outside it, and I agree with Douglas Crockford that the second version looks like dogballs hanging off the end.

Anyhow that’s my little rant about the wrapper.

The purpose of the wrapper is a good coding practice to protect your code from undesired changes from outside of your code, and to protect the browser from functions and variables within your own code.

The preload function ensures that the images have all been loaded, so that there’s no delay while the image is being loaded (as it’s already been preloaded) when the next image is used.

The last function occurs on the click event, which increases a counter and changes the image to the next image.

2 Likes
5

Thanks for that information and it’s accompanying explanation. :ok_hand:

coothead

6

ok, just a little confusion still (sorry)
The preload function

function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
  }
   c=0;
 }

loops through the preloads and loads the images.,
what does preloads[preloads.length-1].src=arguments[c]; do?
in the last function, this.src points the image with the id(‘dynamic-image’)
The last function happens every time the event happens right?
Can you explain why the first function wraps everything and what is the difference between having the parenthesis outside the function?

Thanks…

7

The wrapper around everything means that the code can’t accidentally interact with other scripts in the same page because the variables are local to the function they are defined in.

Both ways with the parentheses work but one has the ones to execute the function attached to the function normally while the other applies it outside of the parentheses that wrap the function itself (which is done so that the anonymous function doesn’t have the keyword ‘function’ at the start of the statement where it has a different meaning).

(x()) as compared to (x)() - where x is the function - the first more accurately reflects the relationship between x and ()

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.