Others

Others


How To create eCommerce product image gallery using CSS and JavaScript


In this example, we will create an eCommerce image gallery using HTML, CSS and JavaScript which involves arranging the product images in a horizontal view using the flex property, and when someone hovers the mouse pointer over an image, the image will maximize using JavaScript.

Ouput

Here is the code to create an eCommerce product image gallery using CSS and JavaScript

Example 
<html>
  <head>
    <title>eCommerce product image gallery using CSS and JavaScript</title>
    <style>
      .product-gallery{
        width:350px;
      }
      .image-viewer{
        width:100%;
        height:300px;
        padding:20px;
        box-sizing:border-box;
        display:flex;
        justify-content:center;
        align-items:center;
      }
      .image-viewer img{
        max-width:100%;
      }
      .image-thumb{
        width:100%;
        display:flex;
        justify-content:space-between;
      }
      .image-thumb img{
        height:60px;
        border:1px solid grey;
        padding:5px;
        opacity:0.6;
      }
      .active{
        opacity:1!important;
        border:1px solid red!important;
      }
    </style>
  </head>
  <body>
  <div class='product-gallery'>
    <div class='image-viewer'>
      <img src='images/1.jpg'>
    </div>
    <div class='image-thumb'>
      <img src='images/1.jpg' onmouseover="updateImage(this)" class='active' >
      <img src='images/2.jpg' onmouseover="updateImage(this)">
      <img src='images/3.jpg' onmouseover="updateImage(this)">
      <img src='images/4.jpg' onmouseover="updateImage(this)" >
    </div>
  </div>
  <script>
    function updateImage(ele){
      document.querySelector(".image-viewer").querySelector("img").src = ele.src;
      var images = document.querySelector(".image-thumb").querySelectorAll("img");
      for(i=0;i<images.length;i++){
        images[i].classList.remove("active");
      }
      ele.classList.add("active");
    }
  </script>
  </body>
</html>
Try it Yourself