I am trying to replicate Cargo's image gallery scrub using my own HTML/CSS and/or Java. Example of what I want here on image click: https://sage-smith.com/. It is similar to this stack thread (which worked in my code): how to change image onclick javascript function?

However, this solution only offers to click between 2 images. I am trying to do it with multiple images (like an image gallery).

This is what I have so far:

HTML

 <a><img src="collage3.jpg" id="changer" onclick="changeImage(this)"/></a>

Javascript

  function changeImage(element) {
     element.src = element.bln ? "collage3.jpg" : "asset-2.png";
     element.bln = !element.bln;  /* assigns opposite boolean value always */
 }

CodePudding user response：

if you have to change only 2 images you can add some style by displaying none and block in css

simple example:

<div onclick="yourFunction()">
  <img src="url" style="display: none" />
  <img src="url" style="display: block" />
</div>

 
// js

function yourFunction(){
  //here is you need to add style for img1 like  display block aaa img2 is 
  //display none !
  document.querySelector(".img1").style.display = 'block'";
  document.querySelector(".img2").style.display = 'none'";

  //if you need to back images on click again you can do it by false and  true 
}

//this is a simple code that i thought

CodePudding user response：

First I would recommend you preload your images. Have an array of image sources, and then create a new array of images that you can then loop through. In this example I've used a promise and async/await to manage this operation.

Have a container for each image set. Attach a listener to it. The function that we reference in addEventListener actually returns a new function that will be used as a handler when the event is triggered. We pass in the container, an id, and the image set that it is going to be responsible for.

Inside handleClick we initialise index which is the current index of the array. We set the initial image in the container, and then increase index ready for the next click.

The closure (the function returned by handleClick does the work. When a click is triggered it checks index to see if it's exceeded the length of the array (in which case it resets index to 0), and then updates the image, finally increasing index for the next round.

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;
  }

}

div { display: inline-block; height: 100px; width: 100px; }
div:hover { cursor: pointer; }
img { height: 100px; width: 100px; }

<div data-id="1"></div>
<div data-id="2"></div>