How to make a gallery in HTML JavaScript

Learn how to create an interactive image gallery in HTML & JavaScript, complete with an example!

Creating an Image Gallery in HTML and JavaScript

A basic HTML and JavaScript image gallery can be created using a few simple tags and lines of code. The following example will demonstrate how to code an image gallery using HTML and JavaScript.

HTML Code

The HTML code for the image gallery will be quite simple. We will use the <img> tag to define the image elements and the <div> tag to contain the images. We will also make use of the <script> tag to call our JavaScript functions.

<div id="gallery">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />
  <img src="image4.jpg" alt="Image 4" />
</div>

<script type="text/javascript">
  // call our JavaScript functions here
</script>

JavaScript Code

We will use a few simple JavaScript functions to create a basic image gallery. First, we will create a function to cycle through the images in the gallery. This function will take an argument, which will be the number of the image to display. The function will loop through the images, hiding all of them except for the one specified by the argument.

function showImage(index) {
  // get all of the images
  var images = document.getElementById("gallery").getElementsByTagName("img");

  // loop through the images and hide all of them
  for (var i = 0; i < images.length; i++) {
    images[i].style.display = "none";
  }

  // show the specified image
  images[index].style.display = "block";
}

Next, we will create a function to move to the next image in the gallery. This function will increase the index of the image to be displayed and then call the showImage() function with the new index. This function will also make sure that the index does not exceed the number of images in the gallery.

function nextImage() {
  // get the number of images
  var images = document.getElementById("gallery").getElementsByTagName("img");

  // increase the index
  currentIndex++;

  // make sure the index does not exceed the number of images
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }

  // call the showImage() function
  showImage(currentIndex);
}

Finally, we will create a function to move to the previous image in the gallery. This function will work in the same way as the nextImage() function, but it will decrease the index instead of increasing it.

function prevImage() {
  // get the number of images
  var images = document.getElementById("gallery").getElementsByTagName("img");

  // decrease the index
  currentIndex--;

  // make sure the index does not go below 0
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }

  // call the showImage() function
  showImage(currentIndex);
}

Now that we have our functions defined, we can call them from the <script> tag in our HTML. We will also set our currentIndex variable to 0 so that the first image in the gallery will be displayed when the page is loaded.

// set the current index to 0
var currentIndex = 0;

// call the showImage() function
showImage(currentIndex);

At this point, our basic image gallery is complete. We can then add buttons or links to our HTML to call the nextImage() and prevImage() functions when they are clicked.