Hello Coders, In this article we are going to learn how to create a simple image gallery using HTML, CSS and JavaScript. This tutorial has complete step by step video tutorial as well as source code of this project.
This is going to be a very simple and easy to follow tutorial for beginners. For your reference I have also provided the source code and you can download it at the end of this article.
Learn How to Create a Simple Image Gallery Using HTML, CSS and JavaScript | Step by Step Video Tutorial
Build a Simple Image Gallery Using HTML, CSS and JavaScript | Step by Step Tutorial with Source Code
Lets start by creating three files that are required for this project: index.html, styles.css and script.js. Don’t forget to link you css file and script file to your html.
Step 1: Setting up the HTML
As usual we will add the boiler plate of the html. First create a div with class name main-gallery and inside that add a main-image class to the image which will be displayed bigger. Now Create a div with class thumbnail-container. Inside this div we will add 5 images. For the images we will add the class name thumbnail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>5 Rotating Image Gallery</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="image-gallery">
<img id="main-image" src="https://i.postimg.cc/BQcRL38F/pexels-photo-761963.jpg" alt="image1" />
<div id="thumbnail-container">
<img class="thumbnail" src="https://i.postimg.cc/1RWVB11x/pexels-photo-941693.jpg" alt="image1" />
<img class="thumbnail" src="https://i.postimg.cc/CMfHRKfP/woman-2003647-960-720.jpg" alt="image2" />
<img class="thumbnail" src="https://i.postimg.cc/T1rDCpVT/beautiful-1274056-960-720.jpg" alt="image3" />
<img class="thumbnail" src="https://i.postimg.cc/SNf99YQr/woman-1807533-960-720.jpg" alt="image4" />
<img class="thumbnail" src="https://i.postimg.cc/2SHBcpZL/pexels-photo-4664520.jpg" alt="image5" />
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding Styles
Inside our css file add the following styles.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
max-width: 900px;
margin: 0 auto;
background-color: #ebebeb;
}
#image-gallery {
width: 35rem;
margin: 4rem auto;
}
#main-image {
width: 100%;
background-color: #fff;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
#thumbnail-container {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.thumbnail {
width: 100px;
height: 100px;
margin: 0 10px;
cursor: pointer;
}
.thumbnail:hover {
opacity: 0.7;
}
Step 3: Adding JavaScript
For JavaScript we will get two DOM elements and store them in thumbnails and mainImage variables. thumbnails will contain all the image elements since we are using querySelectorAll which will return an array of all the elements having the class name thumbnail. mainImage will have the main big image that will be displayed there once clicked.
We will add a click addEventListener to all the thumbnails and add the src attribute of that thumbnail to the main image when the user clicks on them.
var thumbnails = document.querySelectorAll(".thumbnail")
var mainImage = document.querySelector("#main-image")
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener("click", function () {
mainImage.src = this.src
})
}
Lets gooo! Congrats on Completing this project. You can get the source code from below. Also don’t forget to check our other JavaScript Project Tutorials. Thank You
