Responsive Image Gallery HTML CSS JavaScript

This HTML CSS and JavaScript project helps you to create a responsive image gallery. It comes with a grid layout of thumbnail cards and uses Fancybox JS for lightbox. Each card contains an image and a link to a larger version of the image, which is displayed when the user clicks on the image. The link uses the data-fancybox attribute to open a fancybox window with the larger image, and the data-caption attribute displays a caption for the image.

How to Create Responsive Image Gallery

First, load the FacnyBox CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'>

Create the HTML structure for image gallery as follows:

<main class="main">
  <div class="container">
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?nature" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?nature" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?food" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?food" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?travel" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?travel" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?building" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?building" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?flower" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?flower" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?animal" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?animal" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?sport" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?sport" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?human" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?human" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://source.unsplash.com/1280x720/?mountain" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://source.unsplash.com/1280x720/?mountain" alt="Image Gallery">
        </a>
      </div>
    </div>
  </div>
</main>

Style the gallery using the following CSS styles:

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cd__main{
   display: block !important;
}
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #252a32;
  background: #ffffff;
}

.container {
  max-width: 80rem;
  width: 100%;
  padding: 4rem 2rem;
  margin: 0 auto;
}

.main .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}
.main .card {
  color: #252a32;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.main .card-image {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 70%;
  background: #ffffff;
}
.main .card-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 600px) {
  .main .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}

Load the jQuery and Fancybox JS by adding the following CDN to your project.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'></script>

Finally, initialize the image gallery with the following configuration options.

// Fancybox Configuration
$('[data-fancybox="gallery"]').fancybox({
  buttons: [
    "slideShow",
    "thumbs",
    "zoom",
    "fullScreen",
    "share",
    "close"
  ],
  loop: false,
  protect: true
});

That’s all! hopefully, you have successfully created a responsive image gallery in HTML CSS & JavaScript. If you have any questions or suggestions, feel free to comment below.