Building an interactive JavaScript picture gallery: Implementing dynamic picture switching function

This tutorial details how to build a fully functional interactive picture gallery using HTML, CSS and JavaScript. We will learn how to set the structure and style of the gallery, and implement the function of dynamically switching the main image when clicking on the thumbnail. The article will cover core JavaScript logic, necessary CSS layout, and emphasize key considerations such as the correctness of image paths to help you create a picture display interface with a good user experience.

Image gallery is a common component in web design that can display multiple images in an intuitive way. An interactive gallery usually allows the user to click on the thumbnail to switch the displayed main image. This article will guide you to build such a gallery from scratch and solve common problems such as "game not interacting".

1. HTML structure: Defining the gallery skeleton

First, we need to define the HTML structure of the gallery. This includes a main image display area and a set of thumbnails.

 <div class="gallery">
  <div class="gallery-main">
    <!-- The main image display area, facilitate JavaScript operation through ID->
    <img src="/static/imghw/default1.png"  data-src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg"  class="lazy" alt="main picture" id="main">
  </div>

  <div class="gallery-p">
    <!-- Thumbnail area, each thumbnail is bound to a click event -->
    <img src="/static/imghw/default1.png" data-src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg" class="lazy" alt="Thumbnail 1" onclick="changeimage(this.src)">
    <img src="/static/imghw/default1.png" data-src="https://i.ibb.co/0GwkygJ/imagename-2.png" class="lazy" alt="Thumbnail 2" onclick="changeimage(this.src)">
    <img src="/static/imghw/default1.png" data-src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg" class="lazy" alt="Thumbnail 3" onclick="changeimage(this.src)">
    <img src="/static/imghw/default1.png" data-src="https://i.ibb.co/0GwkygJ/imagename-2.png" class="lazy" alt="Thumbnail 4" onclick="changeimage(this.src)">
    <img src="/static/imghw/default1.png" data-src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg" class="lazy" alt="Thumbnail 5" onclick="changeimage(this.src)">
    <img src="/static/imghw/default1.png" data-src="https://i.ibb.co/0GwkygJ/imagename-2.png" class="lazy" alt="Thumbnail 6" onclick="changeimage(this.src)">
  </div>
</div>

Structural description:

• .gallery : A container for the entire gallery for overall layout and centering.
• .gallery-main : A container containing the main image. The main image element has a unique id="main" so that JavaScript can accurately obtain and modify its src attributes.
• .gallery-p : A container containing all thumbnails. Each thumbnail element has an inline onclick="changeimage(this.src)" event handler added. When the user clicks on a thumbnail, the global changeimage function will be called and the src attribute value of the currently clicked thumbnail is passed as a parameter this.src.

2. CSS Style: Beautification and Layout Gallery

CSS is used to define the appearance and layout of a gallery, making it responsive and enhancing the visual effect.

 .gallery {
  width: 90%; /* width accounts for 90% of the parent container */
  margin: 0 auto; /* horizontal center*/
}

.gallery-main {
  width: 45rem; /* fixed width of main image area*/
  height: 30rem; /* fixed height of main image area*/
  margin: 0 auto; /* The main image area is horizontally centered*/
}

.gallery-main img {
  width: 100%; /* picture width fill container*/
  height: 100%; /* Image height fill container*/
  object-fit: cover; /* Keep the image proportion and fill the container while maintaining the size, crop the overflowing part*/
  border-radius: 8px; /* rounded border*/
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); /* Shadow effect*/
}

.gallery-p {
  display: flex; /* Use Flexbox to layout thumbnails*/
  justify-content: center; /* Thumbnail center horizontally*/
  flex-wrap: wrap; /* Thumbnails are automatically wrapped to adapt to small screen*/
  margin-top: 2rem; /* Top margin*/
}

.gallery-p img {
  width: 9rem; /* Thumbnail fixed width*/
  height: 7rem; /* Thumbnail fixed height*/
  object-fit: cover; /* Keep the image proportions and fill the container*/
  border-radius: 4px; /* rounded border*/
  margin: 0.5rem; /* Spacing between thumbnails*/
  cursor: pointer; /* The hand cursor is displayed when the mouse is hovered, and you can click */
}

Style description:

• Responsive design : width: 90%; and margin: 0 auto; to adapt and center the gallery width.
• Image filling and cropping : object-fit: cover; Ensure that the image can be displayed correctly in containers of different sizes, avoid deformation, and fill the entire area at the same time.
• Flexbox layout : .gallery-p Use display: flex; in conjunction with justify-content: center; and flex-wrap: wrap; to achieve centering and wrapping thumbnails, which is very important for adapting different screen sizes.
• User experience : cursor: pointer; Improve user experience and clearly state that thumbnails are clickable elements.

3. JavaScript interactive logic: implement image switching function

JavaScript is the core of implementing gallery interaction. We define a simple function to update the src attribute of the main image based on the incoming image path.

 // Define a function to change the source of the main image const changeimage = (src) => {
  // Get the main image element through ID const mainImage = document.getElementById("main");
  // Update the src attribute of the main image to the passed src parameter mainImage.src = src;
}

Code description:

• The changeimage(src) function receives a parameter src, which is the src attribute value of the clicked thumbnail.
• document.getElementById("main") is used to get the main image element in HTML with id "main".
• mainImage.src = src; This line is the key to implementing image switching. It updates the src attribute value of the main image element to the src parameter received by the changeimage function, thereby realizing dynamic switching of the main image content when clicking the thumbnail.

4. Key points and precautions

When building and debugging a picture gallery, you need to pay special attention to the following points, which are the key to ensuring the normal interaction of the gallery:

• Correctness of image paths : This is the most common reason why galleries “not interact” or display blank/breaking pictures. Be sure to make sure that the image path pointed to by the src attribute of all tags in HTML is correct and accessible.

  • For local images, check if the relative path is correct (e.g. images/dublin culture1.jpg).
  • For network images, make sure the URL is complete and the image server allows cross-domain access (if your page and image are not under the same domain). In the example, we used the URL of the common image bed to ensure that the image can be loaded and demonstrated properly.

• JavaScript file introduction order : Make sure your JavaScript code is executed after the HTML structure is loaded. Usually, it is a good habit to put the <script> tag before the </script>

The above is the detailed content of Building an interactive JavaScript picture gallery: Implementing dynamic picture switching function. For more information, please follow other related articles on the PHP Chinese website!