Image Gallery
Rose
Garden
Garden
Sunrise
Great_Pyramid_of_Giza

This site uses cookies from Google to deliver its services and analyze traffic. By using this site, you agree to its use of cookies.

The essential structure of the gallery

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

This site uses cookies from Google to deliver its services and analyze traffic. By using this site, you agree to its use of cookies.