Masonry Image Gallery – CodingNepal

Responsive Filterable Image Gallery in HTML Bootstrap & JavaScript

CodingNepal — Fri, 05 May 2023 10:09:50 +0000

A filterable image gallery is a type of image gallery that allows users to filter or sort the displayed images based on certain categories or tags. This is one of the essential elements on today’s website, as it allows users to easily find the images they are interested in without having to scroll through a long list of images.

Creating a filterable image gallery using HTML, Bootstrap, and JavaScript can greatly enhance your web development skills. With Bootstrap, a popular front-end framework, you can easily create responsive website elements that adapt to different screen sizes and devices.

The purpose of this blog post is to provide you with a comprehensive guide on how to create a filterable image gallery using these three essential technologies: HTML, Bootstrap, and JavaScript. The step-by-step instructions and clear explanations in this post will help you to develop a practical understanding of the process involved in building a filterable image gallery.

Steps for a Filterable Image Gallery in Bootstrap and JavaScript

To create a responsive, filterable image gallery in HTML, Bootstrap and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder.

To start, add the following HTML codes to your index.html file to create a basic layout for the image gallery and filter tabs.




  
    
    Filterable Image Gallery Bootstrap | CodingNepal
    
    
    
    
  
  
    
      
      
        
          
          
          
          
        
      

      
      
        
          
          
            Mountains
            Lorem ipsum dolor..
          
        
        
          
          
            Lights
            Lorem ipsum dolor..
          
        
        
          
          
            Nature
            Lorem ipsum dolor..
          
        
        
          
          
            Retro
            Lorem ipsum dolor..
          
        
        
          
          
            Fast
            Lorem ipsum dolor..
          
        
        
          
          
            Classic
            Lorem ipsum dolor..
          
        
        
          
          
            Men
            Lorem ipsum dolor..
          
        
        
          
          
            Girl
            Lorem ipsum dolor..

Next, add the following CSS codes to your style.css file to style the image gallery and make it interactive and beautiful. Since we’ve used Bootstrap, we don’t need to write more CSS.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: #f1f1f1 !important;
}

body .container {
  max-width: 1100px;
}

#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards .card {
  width: 15rem;
  border: 2px solid transparent;
}

#filterable-cards .card.hide {
  display: none;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}

Finally, add the following JavaScript code to your script.js file to make the image gallery filterable when the user clicks on a specific filter tab.

// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");

// Function to filter cards based on filter buttons
const filterCards = (e) => {
    document.querySelector("#filter-buttons .active").classList.remove("active");
    e.target.classList.add("active");

    filterableCards.forEach(card => {
        // show the card if it matches the clicked filter or show all cards if "all" filter is clicked
        if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
            return card.classList.replace("hide", "show");
        }
        card.classList.add("hide");
    });
}

filterButtons.forEach(button => button.addEventListener("click", filterCards));

Conclusion and Final Words

I hope this blog post has provided you with the necessary knowledge to build your own filterable image gallery using HTML, Bootstrap, and JavaScript. The coding process was designed to be both intuitive and easy to understand, allowing you to tailor your gallery to your specific needs.

However, if you’re interested in exploring a pure CSS, HTML, and JavaScript approach, I recommend checking out my blog on creating a Responsive Filterable Image Gallery using these technologies. This will provide you with an alternative approach to achieving the same goal, and allow you to expand your web development skillset even further.

In case you face any issues or your code is not performing as intended, you can access the source code files for this filterable image gallery at no cost. Simply click on the download button to get the zip file that contains the project folder with all the necessary source code files and images.

Responsive Masonry Image Gallery with Lightbox in HTML CSS & JavaScript

CodingNepal — Sun, 23 Apr 2023 09:15:40 +0000

Masonry image galleries are an excellent choice for displaying images on websites because they offer a unique and visually appealing layout. However, adding a lightbox effect to the images makes them even better, as it allows users to view the images in more detail.

In this blog post, I will guide you through creating a Responsive Masonry Image Gallery with a Lightbox Effect. The process is straightforward, and even beginners can follow along with ease. We will use HTML, CSS, and JavaScript to create the gallery and style it, ensuring that it is responsive and works well on various devices.

The gallery’s standout feature is its responsive design, meaning it will look great on any device, from desktops to mobile phones. As you create this image gallery, you will gain valuable knowledge about web development, such as building layouts using HTML, styling elements with CSS and making them responsive, and other essential JavaScript concepts.

Steps For Creating Image Gallery with Lightbox in HTML & CSS

To create a responsive masonry image gallery with lightbox effect using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder. This static image is only used as a search section background.

To start, add the following HTML codes to your index.html file to create a basic layout for the masonry image gallery with image lightbox.




  
    
    Masonry Image Gallery with Lightbox | CodingNepal
    
    
    
    
  
  
    Masonry Image Gallery with Lightbox
    
      
        
          
            
            Image Preview

Next, add the following CSS codes to your style.css file to give a masonry layout for the image gallery and make an image lightbox. Keep in mind that the lightbox is now hidden because I’ve added some CSS properties to hide it. We’ll show it on image click using JavaScript.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
h1 {
  text-align: center;
  margin-top: 50px;
}
/* Masonry image gallery styling */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px;
  max-width: 85%;
  margin: 40px 0;
  columns: 5 310px;
  list-style: none;
}
.gallery .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery .images img {
  width: 100%;
  transition: transform 0.2s ease;
}

.gallery .images .img:hover img {
  transform: scale(1.1);
}

/* Image lightbox styling */
.lightbox {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  visibility: hidden;
  background: rgba(0,0,0,0.65);
}
.lightbox.show {
  visibility: visible;
}
.lightbox .wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 20px;
  max-width: 850px;
  background: #fff;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.wrapper :where(header, .details) {
  display: flex;
  align-items: center;
}
.wrapper header {
  justify-content: space-between;
}
header .details i {
  font-size: 1.7rem;
}
header .details span {
  font-size: 1.2rem;
  margin-left: 10px;
}
header .buttons i {
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  margin-left: 10px;
  background: #6C757D;
  font-size: 1.25rem;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  transition: 0.2s ease;
}
header .buttons i:hover {
  background: #5f666d;
}
.wrapper .preview-img {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.preview-img .img {
  max-height: 65vh;
}
.preview-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive media query code */
@media screen and (max-width: 688px) {
  .lightbox .wrapper {
    padding: 12px;
    max-width: calc(100% - 26px);
  }
  .wrapper .preview-img {
    margin-top: 15px;
  }
  .gallery .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}

Finally, add the following JavaScript code to your script.js file to show a lightbox when the user clicks on the specific image and then hide the lightbox when they click on the close icon.

const allImages = document.querySelectorAll(".images .img");
const lightbox = document.querySelector(".lightbox");
const closeImgBtn = lightbox.querySelector(".close-icon");

allImages.forEach(img => {
    // Calling showLightBox function with passing clicked img src as argument
    img.addEventListener("click", () => showLightbox(img.querySelector("img").src));
});

const showLightbox = (img) => {
    // Showing lightbox and updating img source
    lightbox.querySelector("img").src = img;
    lightbox.classList.add("show");
    document.body.style.overflow = "hidden";
}

closeImgBtn.addEventListener("click", () => {
    // Hiding lightbox on close icon click
    lightbox.classList.remove("show");
    document.body.style.overflow = "auto";
});

In short, we started by creating a simple unordered list structure of images, styling it using CSS to create a masonry layout, and adding a div with the class “lightbox” to contain the image preview and close button. Finally, we added JavaScript code to show and hide the lightbox as needed.

Conclusion and Final Words

By following the steps in this blog post, I hope you were able to create a masonry image gallery with a lightbox effect using HTML, CSS, and JavaScript. The code and logic behind creating this image gallery were quite simple and easy to follow.

If you’re eager to enhance your web development skills further, why not explore our blog on Creating a Functional Image Gallery in HTML, CSS, and JavaScript? This informative post guides you through the process of creating an image gallery that lets users search for, view, and download images.

If you encounter any problems or your code is not working as expected, you can download the source code files for this masonry image gallery for free. Click on the download button to get the zip file containing the project folder with source code files and images.