Rendering the next img by click on the img itself-CodePudding

I'm currently building a website with Bootstrap 4 and I want to build a function which allows me to show the next img in a list by clicking on the main-img or "expanded-img" in my code. I already made a function to display the img by clicking on thumbnails, but I had some troubles, probably because the two functions interrupted each other.

You can see here that i have left below the sidebar 3 thumbnails. When i click on a thumbnail the img will be shown in the div for the "expandedImg". I did it with the following code:

function expandingImage(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

<!--START Thumbnaill Navbar-->
<div >
  <img src="#####" alt="THIS IS TITLE NR1"  onclick="expandingImage(this);">
  <img src="#####" alt="THIS IS TITLE NR2"  onclick="expandingImage(this);">
  <img src="#####" alt="THIS IS TITLE NR3"  onclick="expandingImage(this);">
</div>
<!--END Thumbnaill Navbar-->
<div>

  <div >
    <!--START MAIN CONTENT-->
    <div >
      <div >
        <span onclick="this.parentElement.style.display='none'"></span>
        <img  id="expandedImg" style="max-height: 80vh;" src="#####">
      </div>
      <div  id="imgtext">
        <figcaption style="color: #999999; font-size: 12px;" >HERE IS THE TITLE</figcaption>
      </div>
    </div>
    <!--END MAIN CONTENT-->

  </div>
  <!--col-md-9-->
</div>

But I want a function in which you click on the expanded-image and the next img would be shown and ideally in a loop. so that you could switch from the last image in the list to the first image in the list for n images. Is there any elegant way of implement my desired function into this piece of code?

Like a function with n number of images and with the counter [i] and if [i] is equal to the number of images the first image will be shown? But i don't know how to count the elements/links or give them certain values so that you have a way to count and address the certain images.

I'll try it by myself but I'm glad for every helping hand!!

CodePudding user response：

Check my solution below

const imagesArr = [{
    image: 'https://images.unsplash.com/photo-1660411978988-8c651cdf3507?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MTY0MDU3MA&ixlib=rb-1.2.1&q=80&w=1080',
    alt: 'THIS IS TITLE NR1',
  },
  {
    image: 'https://images.unsplash.com/photo-1660906864977-71d53fa439d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MTY0MDU5OQ&ixlib=rb-1.2.1&q=80&w=1080',
    alt: 'nr2',
  },
  {
    image: 'https://source.unsplash.com/random',
    alt: 'nr3'
  },
];


const createImage = (image, alt, index) => {
  return `<img src="${image}" alt="${alt}"  onClick="expandingImage(this)" currentimage="${index}"/>`;
};

const createImages = (images) => {
  let final = '';
  for (let i = 0; i < images.length; i  ) {
    const e = images[i];
    final  = createImage(e.image, e.alt, i);
  }
  return final;
}

document.addEventListener("DOMContentLoaded", function() {
  console.log('Loaded')

  const container = document.querySelector('.thumbnailContainer');

  container.innerHTML = createImages(imagesArr)
});

const nextImage = (img) => {
  const current =  img.getAttribute('currentimage');
  if (current < imagesArr.length - 1) {
    img.setAttribute('src', imagesArr[current   1].image)
    img.setAttribute('currentimage', current   1)
  }
}

function expandingImage(imgs) {
  const expandImg = document.getElementById("expandedImg");
  const imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.setAttribute("currentimage", imgs.getAttribute('currentimage'))
  expandImg.parentElement.style.display = "block";
}

.img-thumbnail-desktop {
  max-width: 100px;
}

<!--START Thumbnaill Navbar-->
<div >

</div>
<!--END Thumbnaill Navbar-->
<div>

  <div >
    <!--START MAIN CONTENT-->
    <div >
      <div >
        <span onclick="this.parentElement.style.display='none'"></span>
        <img  id="expandedImg" style="max-height: 80vh;" src="#####" onClick="nextImage(this)" />
      </div>
      <div  id="imgtext">
        <figcaption style="color: #999999; font-size: 12px;" >HERE IS THE TITLE</figcaption>
      </div>
    </div>
    <!--END MAIN CONTENT-->

  </div>
  <!--col-md-9-->
</div>

CodePudding user response：

Could you use the data-* attribute to set numbers on each of the elements? Then in your function you could write the logic to cycle through the images, or go from last to first, or backwards from first to last.