Minimalist Responsive Photo Gallery In jQuery

A minimal, clean, responsive photo gallery written in JavaScript (jQuery), HTML, and CSS.

Features:

• Responsive layout based on CSS Grid.
• Smooth hover effects.
• Open the image in a fullscreen lightbox popup.

How to use it:

1. Add images to the gallery.

<div class="images-wrapper">
  <div class="img-cont">
    <img class="image" src="thumbnail-1.jpg" data-full="full-1.jpg" alt="Image Alt">
  </div>
  <div class="img-cont">
    <img class="image" src="thumbnail-2.jpg" data-full="full-2.jpg" alt="Image Alt">
  </div>
  <div class="img-cont">
    <img class="image" src="thumbnail-3.jpg" data-full="full-3.jpg" alt="Image Alt">
  </div>
  ... more images here ...
</div>

2. Create the HTML for the image lightbox.

<div class="full-image-container">
  <img class="full-image" src="" alt="">
  <p class="image-title"></p>
</div>

3. The required CSS styles for the gallery.

.images-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(300px, 1fr))[auto-fit];
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  min-height: 100vh;
  grid-gap: 1rem;
}

.images-wrapper .img-cont {
  overflow: hidden;
}

.images-wrapper .img-cont img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.images-wrapper .img-cont img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

4. Style the image lightbox.

.full-image-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0rem 1rem;
  opacity: 0;
  pointer-events: none;
}

.full-image-container .full-image {
  width: 600px;
  max-width: 100%;
  min-height: 50vh;
  -o-object-fit: cover;
  object-fit: cover;
}

.full-image-container .image-title {
  color: #ffffff;
  background: #ff6464;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  text-transform: capitalize;
}

.full-image-container.open {
  opacity: 1;
  pointer-events: all;
}

5. Load the latest jQuery JavaScript library in the document.

<script src="/path/to/cdn/jquery.min.js"></script>

6. The main jQuery script to enable the photo gallery & image lightbox.

// global variable
const images = $('.image');

// each images loop
images.each((index,image) => {
  $(image).click(function() {
    const imageData = $(this).attr('data-full');
    const imageTitle = $(this).attr('alt');
    fullImage(imageData,imageTitle)
  })
})

// function for full images
const fullImage = (imagedata, imagetitle) => {
  // full image container added class open for dark bg
  $('.full-image-container').addClass('open');
  // full image src is function fullimage's first parameter
  $('.full-image-container .full-image').attr(`src`,imagedata);
  // full iamge text content is secont parameter 
  $('.full-image-container .image-title').html(imagetitle);
  // event for remove full image container
  $('.full-image-container').click(function() {
      $(this).removeClass('open');
  })
}

---

This awesome jQuery plugin is developed by lukinoo. For more Advanced Usages, please check the demo page or visit the official website.