Building a Responsive Image Gallery with HTML, CSS, and JavaScript

In this tutorial, we will be building a responsive image gallery using HTML, CSS, and JavaScript. The goal is to create a user-friendly image gallery that adjusts to different screen sizes and devices, making it accessible for all users.

First, let's start with the HTML. For our image gallery, we will be using a unordered list to hold our images. Each list item will represent a single image and will contain an image tag and a caption. Here's the HTML code for our image gallery:

<ul class="image-gallery">
  <li>
    <img src="image1.jpg" alt="Image 1">
    <p>Image 1</p>
  </li>
  <li>
    <img src="image2.jpg" alt="Image 2">
    <p>Image 2</p>
  </li>
  <li>
    <img src="image3.jpg" alt="Image 3">
    <p>Image 3</p>
  </li>
  <!-- Add more images as needed -->
</ul>

Next, let's style our image gallery using CSS. To make the images appear in a grid-like structure, we will be using CSS Grid. CSS Grid is a two-dimensional layout system that allows us to create complex grid structures with ease. In this case, we want each image to take up an equal amount of space in the grid, so we will set the grid-template-columns property to 1fr (fractional unit). The fractional unit fr is a flexible unit that takes up a portion of the available space in the grid container. By setting the grid-template-columns property to 1fr, we are telling the grid to divide the available space equally among all the grid items.

Here's the CSS code for our image gallery:

.image-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.image-gallery li {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ddd;
  padding: 20px;
}

.image-gallery img {
  width: 100%;
  height: auto;
}

In the above code, we are using display: grid to turn our unordered list into a grid container. The grid-template-columns property is set to 1fr to divide the available space equally among all the grid items. The gap property is used to add a margin between the grid items.

We are also using display: flex to turn each list item into a flex container. The flex-direction property is set to column to arrange the image and caption vertically. The align-items property is set to center to center the image and caption horizontally within the list item. The background-color property is used to add a background color to each list item, and the padding property is used to add some padding to the list items.

Finally, the img tag has its width property set to 100% to make the image fill the entire width of the list item, and its height property is set to auto to maintain the aspect ratio of the image.

Now, let's move on to the JavaScript portion of our image gallery. In this section, we will be using JavaScript to create a modal that displays a larger version of the selected image when clicked. The modal will contain the enlarged image and a close button that closes the modal when clicked.

To start, let's add a class of .modal to our HTML to create the modal container and a class of .modal-close to create the close button. The HTML code for our modal should look like this:

<div class="modal">
  <img src="" alt="">
  <button class="modal-close">Close</button>
</div>

Next, let's add some CSS to style the modal and close button. The CSS code for our modal should look like this:

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 80%;
  max-height: 80%;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

In the above code, we are using display: none to hide the modal by default. The position property is set to fixed to keep the modal in a fixed position on the page, and the top and left properties are set to 0 to place the modal at the top-left corner of the page. The width and height properties are set to 100% to make the modal fill the entire screen. The background-color property is used to add a transparent black background to the modal. The justify-content and align-items properties are set to center to center the image in the middle of the screen.

The img tag has its max-width and max-height properties set to 80% to keep the image from becoming too large.

The .modal-close class is used to style the close button. The position property is set to absolute to place the close button in a fixed position relative to the modal, and the top and right properties are set to 20px to place the close button in the top-right corner of the modal. The background-color property is set to white, the border property is set to none, and the padding property is set to 10px 20px to give the close button some padding. The cursor property is set to pointer to change the cursor to a pointer when the mouse is over the close button.

Finally, let's add some JavaScript to show and hide the modal when the images are clicked. The JavaScript code for our modal should look like this:

const images = document.querySelectorAll('.image-gallery img');
const modal = document.querySelector('.modal');
const modalImg = document.querySelector('.modal img');
const modalClose = document.querySelector('.modal-close');

images.forEach(img => {
  img.addEventListener('click', () => {
    modal.style.display = 'flex';
    modalImg.src = img.src;
  });
});

modalClose.addEventListener('click', () => {
  modal.style.display = 'none';
});

In the above code, we are using the querySelectorAll method to select all of the images in our image gallery and store them in the images constant. We are also using the querySelector method to select the modal, the image in the modal, and the close button and store them in the modal, modalImg, and modalClose constants, respectively.

We are using a forEach loop to add a click event listener to each of the images in the image gallery. When an image is clicked, the modal's display property is set to flex to show the modal and the src property of the modal image is set to the src of the clicked image.

We are also adding a click event listener to the close button. When the close button is clicked, the modal's display property is set to none to hide the modal.

And that's it! With these simple HTML, CSS, and JavaScript code snippets, you have successfully created a responsive image gallery with a modal for displaying larger versions of the images. Feel free to customize the styles and functionality of your image gallery to better suit your needs.