Question 224178 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Adding multiple event listeners to dynamically created images for individual popups

I’m working on a website that uses a popup to display images when users click on certain elements. This website has 24 images, and when clicking on each image, it opens a different popup.
The current code allows me to display a single image in the popup when clicking on an element, but I need to add a second image to the same popup.

     document.addEventListener('DOMContentLoaded', function() {
    var div1 = document.querySelector('.spectra-image-gallery__media-wrppear');
    var div2 = document.querySelectorAll('.spectra-image-gallery__media-wrapper')[1];

    div1.addEventListener('click', function() {
      openPopup('https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png', "https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png" );
    });
    

    div2.addEventListener('click', function() {
      openPopup('https://media.istockphoto.com/id/475251515/vector/3d-shiny-red-number-2.jpg?s=612x612&w=0&k=20&c=oY4nzhBPaUUZ6OAudkWtWergdNrxD-G_8y4V4XAqSuQ=');
    });
  });

  function openPopup(imageUrl) {
    var popupContainer = document.getElementById('popupContainer');
    var popupImage = document.getElementById('popupImage');

    popupImage.src = imageUrl;
    popupContainer.style.display = 'block';
  }

  function closePopup() {
    var popupContainer = document.getElementById('popupContainer');

    popupContainer.style.display = 'none';
  }

I’m trying to add a second image inside the popup with the code below, but it doesn’t work. Is it possible to add something like this to just add a new addEventListener for each of the 24 images there and pass the src to each one of the images through the openPopup function?

document.addEventListener('DOMContentLoaded', function() {
    var div1 = document.querySelector('.spectra-image-gallery__media-wrapper');
    var div2 = document.querySelectorAll('.spectra-image-gallery__media-wrapper')[1];

    div1.addEventListener('click', function() {
      openPopup('https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png', 'https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png');
    });

    div2.addEventListener('click', function() {
      openPopup('https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png', "https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png, https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png', "https://completeexteriorsms.com/wp-content/uploads/2023/06/residential-roofing-serices-1-e1688069648532.png');
    });
  });

  function openPopup(imageUrl1, imageUrl2) {
    var popupContainer = document.getElementById('popupContainer');
    var popupImage = document.getElementById('popupImage');
      var popupImage2 = document.getElementById('popupImage2'); 

   popupImage.src = imageUrl1;
  popupImage2.src = imageUrl2;

    popupContainer.style.display = 'block';
  }

  function closePopup() {
    var popupContainer = document.getElementById('popupContainer');

    popupContainer.style.display = 'none';
  }

Is it not possible to do something like this, is there any option to minimize the written code and avoid too much repetition?

Tags:

2

Answers


  1. 0

    To handle multiple images per popup in a dynamic way, you can modify your openPopup function to take an array of image URLs and dynamically create image elements for each URL.

    Look at this code:

    document.querySelectorAll('.spectra-image-gallery__media-wrapper').forEach((div, index) => {
  div.addEventListener('click', function() {
    openPopup([
      'https://link_to_your_image1.png',
      'https://link_to_your_image2.png',
      // add more URLs if necessary
    ]);
  });
});

function openPopup(imageUrls) {
  const popupContainer = document.getElementById('popupContainer');
  popupContainer.innerHTML = imageUrls.map(url => `<img src="${url}">`).join('');
  popupContainer.style.display = 'block';
}

function closePopup() {
  document.getElementById('popupContainer').style.display = 'none';
}

    In this code, image URLs are placed inside an array, and map is used to generate HTML string for each image, then the innerHTML of popupContainer is replaced by these strings.

    Hope this helps!

    Login or Signup to reply.
  2. 0

    you can try this approach :

    1. HTML Structure: Make sure your HTML structure has a common class for all the image elements you want to add this functionality to. For example:
      html

      <div class="spectra-image-gallery">
<div class="spectra-image-gallery__media-wrapper">
<img src="image-url-1.jpg" alt="Image 1">
</div>
<div class="spectra-image-gallery__media-wrapper">
<img src="image-url-2.jpg" alt="Image 2">
</div>
<!-- Add more image wrappers here -->

    2. Javascript :

      document.addEventListener('DOMContentLoaded', function() {
    var imageWrappers = document.querySelectorAll('.spectra-image-gallery__media-wrapper');

    imageWrappers.forEach(function(wrapper) {
    wrapper.addEventListener('click', function() {
        var imageUrl1 = this.querySelector('img').src;
        var imageUrl2 = "second-image-url.jpg"; // Provide the URL for the second image

        openPopup(imageUrl1, imageUrl2);
    });
    });
});

function openPopup(imageUrl1, imageUrl2) {
    var popupContainer = document.getElementById('popupContainer');
    var popupImage = document.getElementById('popupImage');
    var popupImage2 = document.getElementById('popupImage2');

    popupImage.src = imageUrl1;
    popupImage2.src = imageUrl2;

    popupContainer.style.display = 'block';
}

function closePopup() {
    var popupContainer = document.getElementById('popupContainer');

    popupContainer.style.display = 'none';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search