Creating a Dynamic Photo Gallery with JavaScript: Tips and Tricks

Images are an important part of website design. They help us break the monotony of text and provide some information visually to our visitors. While images usually have a supplementary role on many websites, they are the primary content of others. in this example hepls to create simple gallery in your website.

A photo gallery in JavaScript is a web application that allows users to view and interact with a collection of images. These galleries can be created using a combination of JavaScript, HTML, and CSS.

JavaScript is used to create the dynamic functionality of the gallery, such as allowing users to navigate through the images and perform actions such as zooming and panning. HTML is used to create the structure and layout of the gallery, and CSS is used to style and design the gallery to match the website or application's overall aesthetic.

There are several libraries and frameworks available to help developers create a photo gallery in JavaScript, such as Lightbox, PhotoSwipe, and Magnific Popup. These libraries provide pre-built functionality and can help to save time and effort when building a gallery.

Some common features that might be included in a JavaScript photo gallery are:

Thumbnail navigation
Lightbox view
Image zoom
Image panning
Image captions
Responsive design
Support for different image types (jpg, png, gif, etc.)

The code provided is an example of a basic HTML document that displays a photo gallery. The <!DOCTYPE> declaration specifies that this is an HTML document, and the <html> tag indicates the beginning of the document. The <head> section contains meta information about the document, such as the character set and the title of the page.

The <body> section contains the content that will be displayed on the web page. In this case, there is a single <div> element with the class "container" that contains several <img> elements. Each image element has the class "img" and its src attribute points to an image file in the "images" folder.

The <link> element in the <head> section is used to link an external CSS file named "style.css" to the HTML document. This file can be used to style the elements on the page, such as the container and images.

At the bottom of the <body> section, there is a <script> element that references an external JavaScript file named "script.js". This file can be used to add dynamic functionality to the page, such as allowing the user to navigate through the images or perform other actions.

Overall, this code is a simple example of a static HTML document that displays a photo gallery using a container <div> and several <img> elements. The external CSS and JavaScript files can be used to add further styling and functionality to the gallery.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
      
      <img src="images/1.jpg" class="img">
      <img src="images/2.jpg" class="img">
      <img src="images/3.jpg" class="img">
      <img src="images/4.jpg" class="img">
      <img src="images/5.jpg" class="img">
      <img src="images/6.jpg" class="img">
     
  </div>
  <script src="js/script.js"></script>
</body>
</html>

css/style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  height: 100vh;
  background-color: #353b48;
  display: grid;
  grid-template-columns: repeat(3,200px);
  justify-content: center;
  align-content: center;
  gap: 16px;
}


.img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center center;
  background-color: #fff;
  padding: 5px;
  border-radius: 3px;
}

#modal{
  background-color: rgba(255,255,255,0.5);
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  display: none;
}


#modal.active{
  display: grid;
  place-items: center;
}

#img{
  max-width: 80%;
  max-height: 80%;
  border: 4px solid white;
  box-shadow: 1px 3px 20px rgba(0,0,0,0.5);
}

The code you provided is a JavaScript script that creates a modal window for displaying images in a photo gallery.

First, it creates a new div element with an id of "modal" and appends it to the document.body. This creates an empty modal window that will be used to display the images.

Then it selects all elements with class "img" using querySelectorAll('.img') and assigns the result to a variable named images.

It then uses the forEach() method to loop through each of the images and adds an event listener for a click event. When an image is clicked, the event listener will execute a callback function.

Inside the callback function, it adds a class "active" to the modal window, which will make it visible to the user. Then it creates a new img element, assigns the src of the clicked image to it, and add id "img" to it. Next, it removes all the child elements of the modal window if any, using while(modal.firstChild) and then appends the new img element to the modal window using modal.append(img).

Finally, it adds an event listener to the modal window for a click event. When the modal window is clicked, the event listener will execute a callback function which removes the "active" class from the modal window, effectively hiding it from the user.

js/script.js

const modal=document.createElement('div');
modal.id='modal';
document.body.appendChild(modal);

const images=document.querySelectorAll('.img');


images.forEach(image=>{
  image.addEventListener('click',()=>{
    modal.classList.add('active');
    const img=document.createElement('img');
    img.src=image.src;
    img.id="img";
    while(modal.firstChild){
      modal.removeChild(modal.firstChild);
    }
    modal.append(img);
  });
});

modal.addEventListener('click',()=>{
  modal.classList.remove('active');
});

Output

Live Preview

Overall, this script creates a modal window that displays an image when a user clicks on it. It also allows the user to close the modal window by clicking on it again.