How to create a Tab Image Gallery – HTML, CSS, and JavaScript

By Saurabh Singh

Today in this tutorial, we are going to learn how we can create a tab gallery using HTML, CSS, and JavaScript.

What is Tab Gallery

Tab gallery is a gallery need only CSS and JavaScript, a gallery that allows the user to switch between images by clicking on the tabbed thumbnail navigation. Built using the CSS hover effect, transition, transforms and JavaScript.

HTML CSS JavaScript to create tab image gallery

  1. Get the expanded image.
  2. Get the image text.
  3. Use the same source in the expanded image as the image is clicked on from the grid.
  4. Use the value of the alt attribute of the clickable image as text inside the expanded image.
  5. Show the container element.

Also, get to know,

Code to create Tab Gallery using HTML CSS JavaScript

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
  margin: 0;
  font-family: Arial;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
</style>
</head>
<body>

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<div class="row">
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

</body>
</html>

Run this HTML CSS JavaScript code to create a tab image gallery.

Leave a Reply