Create a Simple Image Gallery for Your Website (HTML, CSS & JavaScript)

Image Gallery

The essential structure of the gallery

The images will automatically fit to the display ( based on the image)
Show the image in smaller size first. Then When the user click the image it will show in larger scale

The complete code. Just place your image link in the img tag to show the image




<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }

  .image-wrapper {
    position: relative;
    overflow: hidden;
  }

  .zoomable {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
  }

  .full-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .full-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }

  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }

  .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    cursor: pointer;
  }

  .prev-button {
    left: 10px;
  }

  .next-button {
    right: 10px;
  }
</style>
</head>
<body>

<div class="gallery">
  <div class="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Hever_Castle_rose_garden_with_fountain.JPG/1280px-Hever_Castle_rose_garden_with_fountain.JPG" alt="Rose" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Missouri_Botanical_Garden_-_Seiwa-en.JPG/1280px-Missouri_Botanical_Garden_-_Seiwa-en.JPG" alt="Garden" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Singapore_Gardens_by_the_Bay_viewed_from_Marina_Bay_Sands_03.jpg/1280px-Singapore_Gardens_by_the_Bay_viewed_from_Marina_Bay_Sands_03.jpg" alt="Garden" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Monet_-_Impression%2C_Sunrise.jpg/1280px-Monet_-_Impression%2C_Sunrise.jpg" alt="Sunrise" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Rudolf_Reschreiter_Blick_von_der_H%C3%B6llentalangerh%C3%BCtte_zum_H%C3%B6llentalgletscher_und_den_Riffelwandspitzen_1921.jpg/1280px-Rudolf_Reschreiter_Blick_von_der_H%C3%B6llentalangerh%C3%BCtte_zum_H%C3%B6llentalgletscher_und_den_Riffelwandspitzen_1921.jpg" alt="" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Kheops-Pyramid.jpg" alt="Great_Pyramid_of_Giza" class="zoomable">
  </div>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const zoomableImages = document.querySelectorAll('.zoomable');
    let currentIndex = 0;

    zoomableImages.forEach(function (image, index) {
      image.addEventListener('click', function () {
        currentIndex = index;
        showFullImage(currentIndex);
      });
    });

    function showFullImage(index) {
      const fullImageContainer = document.createElement('div');
      fullImageContainer.classList.add('full-image');

      const fullImage = document.createElement('img');
      fullImage.src = zoomableImages[index].src;

      const closeButton = document.createElement('span');
      closeButton.classList.add('close-button');
      closeButton.innerHTML = '&times;';
      closeButton.addEventListener('click', function () {
        document.body.removeChild(fullImageContainer);
      });

      const prevButton = document.createElement('span');
      prevButton.classList.add('nav-button', 'prev-button');
      prevButton.innerHTML = '&#10094;';
      prevButton.addEventListener('click', function () {
        currentIndex = (currentIndex - 1 + zoomableImages.length) % zoomableImages.length;
        fullImage.src = zoomableImages[currentIndex].src;
      });

      const nextButton = document.createElement('span');
      nextButton.classList.add('nav-button', 'next-button');
      nextButton.innerHTML = '&#10095;';
      nextButton.addEventListener('click', function () {
        currentIndex = (currentIndex + 1) % zoomableImages.length;
        fullImage.src = zoomableImages[currentIndex].src;
      });

      fullImageContainer.appendChild(fullImage);
      fullImageContainer.appendChild(closeButton);
      fullImageContainer.appendChild(prevButton);
      fullImageContainer.appendChild(nextButton);
      document.body.appendChild(fullImageContainer);
    }
  });
</script>

</body>
</html>

You can also add image from the directory



<div class="gallery">
  <div class="image-wrapper">
    <img src="images/autumn.jpg" alt="Autumn" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="images/butterfly.jpg" alt="Butterfly" class="zoomable">
  </div>
  <div class="image-wrapper">
    <img src="images/horizon.jpg" alt="Horizon" class="zoomable">
  </div>

</div>

Get the Project code from github

https://github.com/01one/image-gallery-html-css-javascript

Create a Simple Image Gallery for Your Website (HTML, CSS & JavaScript)
April 27, 2024

Related Posts