How to make image Gallery using HTML CSS and JavaScript ?
Nowadays, e-commerce websites are very popular. This type of gallery image has generally seen on e-commerce websites or online stores. in this article, we will create an image gallery using HTML, CSS, and JavaScript. Below are the two steps on how to do it. This will help the beginner to build some small website projects using HTML, CSS, and JavaScript by referring to this article.
Approach: By this article, we are going to create an image gallery. This Image Gallery will display all the product images in small size and one product image in full size. Once you will click on any small image it will show the full size of that particular product image. We will create this functionality in this Image Gallery using JavaScript. Also when you will click on any full-size image we can zoom in on that particular image. we will optimize this feature using transform: scale(1.5); cursor: zoom-in; property.
Before the code, you just need to import the following code in your CSS file for the fonts:
@import url('
https://fonts.googleapis.com/css2?family=Yaldevi:wght@200;300;400;500;600;700&display=swap
');Below is the step by step implementation:
Step 1: Add the following code to the index.html file.
index.html
<!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> How to make image Gallery Using HTML CSS and Javascript? </title> <!--Style CSS--> <link rel="stylesheet" href="style.css"></head> <body> <h1>Welcome to GeeksforGeeks Courses</h1> <h6>Live Workshop and Online Courses!</h6> <div class="myProducts"> <div class="myProducts-gallery"> <img src= alt="click here" onclick="myImageFunction(this)"> <img src= alt="click here" onclick="myImageFunction(this)"> <img src= alt="click here" onclick="myImageFunction(this)"> <img src= alt="click here" onclick="myImageFunction(this)"> </div> <div class="image-container"> <img id="img-Box" src= alt="click here"> </div> </div> <script> function myImageFunction(productSmallImg) { var productFullImg = document.getElementById("img-Box"); productFullImg.src = productSmallImg.src; } </script></body> </html> |
Step 2: Add the following code to the style.css file.
style.css
@import url( * { margin: 0; padding: 0; font-family: 'Yaldevi', sans-serif;} h1 { color: green; font-size: 80px; font-weight: bold; text-align: center; padding-top: 22px;} h6 { color: green; font-size: 20px; font-weight: bold; text-align: center; padding-top: 60px; margin-bottom: 20px;} .myProducts-gallery img{ height: 92px; margin: 10px 0; cursor: pointer; display: block; opacity: .5;} .myProducts-gallery img:hover { opacity: 1;} .myProducts-gallery { float: left;} .myProducts { top: 50%; left: 50%; transform: translate(-50% , -50%); position: absolute;} .image-container img { height: 400px; transition: transform 1s;} .image-container img:hover{ transform: scale(1.5); cursor: zoom-in;} .image-container { float: right; padding: 10px;} |
Output:
Now, as you can see in the output, we have created an e-commerce website image gallery using HTML, CSS, and JavaScript which will help you to create some small website projects.
Please Login to comment...