Breaking News: Grepper is joining You.com. Read the official announcement!

multiple images gallery after clicking image javascript

Drab Dingo answered on July 4, 2022 Popularity 1/10 Helpfulness 1/10

answer multiple images gallery after clicking image javascript

multiple images gallery after clicking image javascript

Comment

const data=[["https://dummyimage.com/100x100/ad40ad/000000","https://dummyimage.com/100x100/454545/000000","https://dummyimage.com/100x100/789acc/000000","https://dummyimage.com/100x100/994563/000000","https://dummyimage.com/100x100/fff456/000000"],["https://dummyimage.com/100x100/ad40ad/000000","https://dummyimage.com/100x100/454545/000000","https://dummyimage.com/100x100/789acc/000000","https://dummyimage.com/100x100/994563/000000","https://dummyimage.com/100x100/fff456/000000"]];

// Returns a new array of images from
// the source array
function loadImageSet(arr) {
  return new Promise(res => {
    const set = arr.map(src => {
      const img = new Image();
      img.src = src;
      return img;
    });
    res(set);
  });
}

// Returns a nested array of images
function preload(data) {
  return Promise.all(data.map(loadImageSet));
}

async function main(data) {
  
  // Get the images
  const images = await preload(data);

  // Cache the containers
  const containers = document.querySelectorAll('div');

  // For each container add a listener. `handleClick`
  // does some initial setup (using the id, and image set),
  // and then returns a new function that is called
  // when `click` is triggered
  containers.forEach(c => {
    const { id } = c.dataset;
    const imageSet = images[id - 1];
    c.addEventListener('click', handleClick(c, id, imageSet), false);
  });

};

// Call the main function
main(data);

// Accepts an id and an image set
function handleClick(container, id, imageSet) {

  // Initialises the array index
  let index = 0;

  // Initialises the first image
  container.appendChild(imageSet[index]);
  
  // Increases the index
  ++index;

  // Return the function that is called when
  // the click event is triggered
  return function () {

    // Reset `index` if it hits the `imageSet` length
    if (index === imageSet.length) index = 0;

    // Replace the image with the next one in
    // in the `imageSet` array
    const img = container.querySelector('img');
    img.replaceWith(imageSet[index]);

    // Finally increase `index`
    ++index;
  }

}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: clicking gallery image javascript

Link to this answer
Share Copy Link

Contributed on Jul 04 2022

Drab Dingo

0 Answers Avg Quality 2/10

multiple images gallery after clicking image javascript

Contents

More Related Answers

multiple images gallery after clicking image javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.