JavaScript Array of Images

JavaScript Array of Images

  1. Use Array Objects to Show an Array of Images in JavaScript
  2. Use Arrays to Show an Array of Images in JavaScript

This tutorial instructs you about the JavaScript array of images’ creation and iteration; it exemplifies using JavaScript Arrays and Array Objects. Each example has a startup code and respective output to practice.

Use Array Objects to Show an Array of Images in JavaScript

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <script src="./javascript/imageArray.js"></script>
    <link rel="stylesheet" href="./css/styles.css">
    <title>Image Iteration</title>
</head>
<body>
    <h1>Click to see the next image</h1>
    <div id="splash">
        <img src="./images/splash class room image.jpg" alt="classroom image" id="mainImage">
    </div> 
    <div id="controls">
        <button id="previousbtn" onclick="previousImage()">Previous Image</button>
        <button id="nextbtn" onclick="nextImage()"> Next Image</button>
    </div>
</body>
</html>

CSS Code:

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

JavaScript Code:

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

Output:

javascript array of images - image iteration using object

In this code, each img element is an image object. The src is also defined by assigning a string that refers to the file name having that particular image.

The nextImage function gets the first element having id mainImage and then iterates over the last images. The previousImage function also gets the first element having id mainImage (just like the nextImage method) but loops from the current image to backward.

Use Arrays to Show an Array of Images in JavaScript

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <script src="./javascript/imageArray.js"></script>
    <link rel="stylesheet" href="./css/styles.css">
    <title>Image Iteration</title>
</head>
<body onload="makeImage();">
    <div class="contents" id="content"></div>
    <button onclick="nextImage()">Next Image</button>
</body>
</html>

CSS Code:

img{
    width: 350px;
    height: 350px;
}

JavaScript Code:

var images = ["./images/splash class room image.jpg",
"./images/splash animal image.jpg",
"./images/splash nature image.jpg",
"./images/splash food image.jpg",
"./images/splash travel image.jpg"];
var index = 0;

function makeImage() {
   var img = document.createElement('img')
   img.src = images[index];
   document.getElementById('content').appendChild(img);
}

function nextImage(){
   var img = document.getElementById('content').getElementsByTagName('img')[0]
   index++;
   index = index % images.length; 
   img.src = images[index];
}

Output:

javascript array of images - image iteration using array

The makeImage function constructs the img tags and specifies their src attribute. This function is called immediately after the page is loaded using the onload event in the <body> tag. The createElement creates the HTML element (we are creating an img element for this example).

Then it specifies the img.src to get the image. The appendChild function appends the img element within the element whose id is content.

In simple words, the makeImage function is making img tags within the tag whose id’s value is content.

The first line of code in the nextImage function gets the first img tag of the element whose id is content. The index = index % images.length; takes you to the first image if you have the last image in the output.

You see the images because this function also sets the src attribute.

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

Related Article - JavaScript Array

  • Check if Array Contains Value in JavaScript
  • Create Array of Specific Length in JavaScript
  • Convert Array to String in JavaScript
  • Remove First Element From an Array in JavaScript
  • Search Objects From an Array in JavaScript
  • Convert Arguments to an Array in JavaScript
  • Related Article - JavaScript Image

  • Crop an Image in JavaScript Using HTML Canvas
  • Fade-In Image Using JavaScript
  • Change Image on Hover in JavaScript
  • Load Image From URL in JavaScript
  • Swap Images in JavaScript
  • Get Image Dimensions in JavaScript