This article is an easy-to-follow tutorial that will provide you with the basic knowledge and skills needed to How to Make Image Gallery in HTML and CSS3. Recently, I made a tutorial on this topic.
So, I’m going to share with you How you can use HTML CSS and a little bit of JavaScript to display the next and previous images. If you’ve knowledge in HTML and CSS3, then you will understand everything, If you don’t have any ideas or knowledge in HTML, and CSS you need to learn it.
What is an Image Gallery?
An image gallery is a collection of images, usually displayed in a grid. The images can be of anything, but they are usually related in some way. For example, an image gallery might display photos of a particular event or location.
How to Make Image Gallery in HTML CSS and JavaScript
First of All, you need to create a file in HTML, inside the HTML document you need to add the basic structure of HTML. Then you need to add the images. So, I’m going to share with you the codes that help you to add the images to the HTML document.
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Image Gallery HTML CSS JavaScript</title>
</head>
<body>
<div class="image-container">
<span style="--i: 1">
<img src="https://picsum.photos/id/478/300/200" alt="" />
</span>
<span style="--i: 2">
<img src="https://picsum.photos/id/370/300/200" alt="" />
</span>
<span style="--i: 3">
<img src="https://picsum.photos/id/239/300/200" alt="" />
</span>
<span style="--i: 4">
<img src="https://picsum.photos/id/59/300/200" alt="" />
</span>
<span style="--i: 5">
<img src="https://picsum.photos/id/163/300/200" alt="" />
</span>
<span style="--i: 6">
<img src="https://picsum.photos/id/69/300/200" alt="" />
</span>
<span style="--i: 7">
<img src="https://picsum.photos/id/153/300/200" alt="" />
</span>
<span style="--i: 8">
<img src="https://picsum.photos/id/20/300/200" alt="" />
</span>
</div>
<!-- Button Container -->
<div class="btn-wrapper">
<button class="btn" id="prev">Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="main.js"></script>
</body>
</html>
inside the HTML document, you’ve seen images, and buttons and also have a –i. —i It’s a variable we will use CSS3 to display the images one by one. Once you do that, then you need to use CSS3 to design that.
I’m going to share the complete CSS3 codes that help you to display the image gallery.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background: #333;
height: 100vh;
overflow: hidden;
}
.image-container {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: perspective(1000px) rotateY(0deg);
transition: transform 0.7s;
}
.image-container span {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}
.image-container span img {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.btn-wrapper {
position: relative;
width: 80%;
}
.btn {
position: absolute;
bottom: -80px;
background: rgba(25, 111, 186, 0.637);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 05px;
cursor: pointer;
}
.btn:hover {
filter: brightness(1.5);
}
#prev {
left: 20%;
}
#next {
right: 20%;
}
Finally, You’ve designed the image gallery using HTML, and CSS but one more thing you need to do. When you click the previous and next buttons to change the images.
So, you need to use JavaScript, inside the index.html file to have button tags. I’ve mentioned the IDs on it, I’m going to use those IDs inside JavaScript to perform the event functions.
const imgcontainer = document.querySelector(".image-container");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
let a = 0;
let timeout;
prev.addEventListener("click", () => {
a = a + 45;
clearTimeout(timeout);
updategellary();
});
next.addEventListener("click", () => {
a = a - 45;
clearTimeout(timeout);
updategellary();
});
function updategellary() {
imgcontainer.style.transform = `perspective(1000px) rotateY(${a}deg)`;
timeout=setTimeout(() => {
a = a - 45;
updategellary();
}, 4000);
}
updategellary();
congratulations you’ve made an image gallery using HTML, CSS, and JavaScript. I hope you’ve got ideas on how to create an image gallery in HTML. If you need to source the code of the project, you can get on below by clicking the Download Button.
How to Create Image Gallery in HTML CSS and JavaScript
Image Gallery is very helpful and beneficial for users, they are visiting the site and then will be able to see attractive and professional images in the particular section. So, you can include the image gallery in your project to get more responses from your website visitors.
Basically, I’ve shared with you the complete source code of the Image Gallery, but If you want to learn it step by step practically. So, I’m going to share with you the video tutorial, you can watch it and also follow it.
Hope you will learn it step by step and you will understand everything you need on it.
Guys, recently, I’ve made another tutorial on this topic. It’s changed which I’ve mentioned earlier.
Responsive Lightbox Image Gallery jQuery
recently, I’ve used a built-in jQuery plugin that helps to display an image gallery in a lightbox. So, I’m going to share with you How to Make a Responsive Lightbox Image Gallery in HTML, CSS, and jQuery.
First of All, you need to write the HTML markup and insert the images inside the HTML document here are the HTML codes.
<!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>Responsive Image Gallery in HTML and CSS3</title>
</head>
<body>
<div id="container">
<div class="image-gallery">
<img src="images/img-1.jpg" alt="" />
<img src="images/img-2.jpg" alt="" />
<img src="images/img-3.jpg" alt="" />
<img src="images/img-4.jpg" alt="" />
<img src="images/img-5.jpg" alt="" />
<img src="images/img-6.jpg" alt="" />
<img src="images/img-7.jpg" alt="" />
<img src="images/img-8.jpg" alt="" />
</div>
</div>
</body>
</html>
then the next thing you need to add the CSS link inside the HTML document and then, you need to use CSS3 to manage the images here is the code of CSS3 to manage the images.
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
#container {
max-width: 100%;
}
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 100px;
align-items: center;
}
.image-gallery img {
max-width: 400px;
min-height: 350px;
padding: 0.5rem;
}
Once you used the above-mentioned codes inside the project, then you are able to see the images that have appeared inside the website in small size on the web.
Then the next thing you need to get is the jQuery plugin that helps users display the images inside the lightbox. So, you need to visit the lightbox2 image gallery. Inside the page, you need to get the source code of the project.
Once you download the jQuery plugin, you need to get the files lightbox. min. cs, lightbox-plus-jquery.min.js, and images from the dist folder, and then add them to your project. then the next thing you need to add CSS and jQuery files inside your HTML document.
<!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>Responsive Image Gallery in HTML and CSS3</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/lightbox.min.css" />
</head>
<body>
<div id="container">
<div class="image-gallery">
<img src="images/img-1.jpg" alt="" />
<img src="images/img-2.jpg" alt="" />
<img src="images/img-3.jpg" alt="" />
<img src="images/img-4.jpg" alt="" />
<img src="images/img-5.jpg" alt="" />
<img src="images/img-6.jpg" alt="" />
<img src="images/img-7.jpg" alt="" />
<img src="images/img-8.jpg" alt="" />
</div>
</div>
<script src="js/lightbox-plus-jquery.min.js"></script>
</body>
</html>The final step you need to follow, you need to add an anchor link inside the image-gallery div. inside the anchor link, you need to add the image path and also add the same image inside the anchor link like this.
And also you need to add the attribute inside the anchor link to display the title and lightbox of the image.
<!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>Responsive Image Gallery in HTML and CSS3</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/lightbox.min.css" />
</head>
<body>
<div id="container">
<div class="image-gallery">
<a href="images/img-1.jpg" data-lightbox="roadtrip" data-title=" First Image">
<img src="images/img-1.jpg" alt="" />
</a>
</div>
</div>
<script src="js/lightbox-plus-jquery.min.js"></script>
</body>
</html>You can add multiple images more than 08 images, then you will be able to see the images will inside the lightbox. So, you can see the complete HTML document codes below.
<!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>Responsive Image Gallery in HTML and CSS3</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/lightbox.min.css" />
</head>
<body>
<div id="container">
<div class="image-gallery">
<a href="images/img-1.jpg" data-lightbox="roadtrip" data-title=" First Image">
<img src="images/img-1.jpg" alt="" />
</a>
<a href="images/img-2.jpg" data-lightbox="roadtrip" data-title=" Second Image">
<img src="images/img-2.jpg" alt="" />
</a>
<a href="images/img-3.jpg" data-lightbox="roadtrip" data-title=" Third Image">
<img src="images/img-3.jpg" alt="" />
</a>
<a href="images/img-4.jpg" data-lightbox="roadtrip" data-title=" Four Image">
<img src="images/img-4.jpg" alt="" />
</a>
<a href="images/img-5.jpg" data-lightbox="roadtrip" data-title=" Five Image">
<img src="images/img-5.jpg" alt="" />
</a>
<a href="images/img-6.jpg" data-lightbox="roadtrip" data-title=" Six Image">
<img src="images/img-6.jpg" alt="" />
</a>
<a href="images/img-7.jpg" data-lightbox="roadtrip" data-title=" Seven Image">
<img src="images/img-7.jpg" alt="" />
</a>
<a href="images/img-8.jpg" data-lightbox="roadtrip" data-title=" Eight Image">
<img src="images/img-8.jpg" alt="" />
</a>
</div>
</div>
<script src="js/lightbox-plus-jquery.min.js"></script>
</body>
</html>
Output of the Responsive Lightbox Image Gallery jQuery
However, If you face any inside the code, you can watch my video tutorial, inside the tutorial, you will learn step-by-step usage of HTML, CSS, and jQuery to display an image gallery on the web.
Photo Gallery For Website HTML Code Free
Guys, recently, I’ve found another tutorial that is related to Image Gallery. In this tutorial, you will learn step-by-step usage of HTML, CSS and JavaScript/jQuery to display Lightbox Image Gallery.
You May Also Like:
- How to Make Navigation Bar in HTML and CSS
- How to create an Automatic Image slider in HTML CSS
- How to Create Registration Form in HTML and CSS3
So, I’m going to share with you my complete video tutorial on below you can watch it. Once you watch it, then hope you will learn many things from the video.
I’ve been creating tutorials how to make image gallery in html css and javascript, here is another responsive image gallery with lightbox. Inside the project, I’ve used advanced CSS property namely CSS grid.
Responsive Image Gallery with LightBox
Let’s look at that how to create a responsive image gallery with lightbox. First of All, we need to design the image gallery using CSS grid, then we need to style it. Once we do that, then we need to use library that are help us to display the lightbox.
Conclusion
After following the steps in this article, you should now have a basic image gallery built using HTML and CSS3. You can add to this gallery by adding more images and styles, or you can use it as is on your website or blog.
If you have any questions about how to make an image gallery in HTML and CSS3, please leave a comment below and we’ll be happy to help.
