Question 36933 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Rendering the next img by click on the img itself – Jquery

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.

enter image description here

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 class="thumbnailContainer">
  <img src="#####" alt="THIS IS TITLE NR1" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
  <img src="#####" alt="THIS IS TITLE NR2" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
  <img src="#####" alt="THIS IS TITLE NR3" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
</div>
<!--END Thumbnaill Navbar-->
<div>

  <div class="col-md-9 ">
    <!--START MAIN CONTENT-->
    <div class="hideMobile">
      <div class="d-flex justify-content-center">
        <span onclick="this.parentElement.style.display='none'"></span>
        <img class="img-fluid img-overlay" id="expandedImg" style="max-height: 80vh;" src="#####">
      </div>
      <div class="container expandedImgSize d-flex justify-content-center" id="imgtext">
        <figcaption style="color: #999999; font-size: 12px;" class="figure-caption">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!!

Tags:

2

Answers


  1. 0

    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}" class="img-thumbnail border-0 img-thumbnail-desktop" 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)
  this.removeEventListener('DOMContentLoaded',arguments.callee,false);
});

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 class="thumbnailContainer">

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

  <div class="col-md-9 ">
    <!--START MAIN CONTENT-->
    <div class="hideMobile">
      <div class="d-flex justify-content-center">
        <span onclick="this.parentElement.style.display='none'"></span>
        <img class="img-fluid img-overlay" id="expandedImg" style="max-height: 80vh;" src="#####" onClick="nextImage(this)" />
      </div>
      <div class="container expandedImgSize d-flex justify-content-center" id="imgtext">
        <figcaption style="color: #999999; font-size: 12px;" class="figure-caption">HERE IS THE TITLE</figcaption>
      </div>
    </div>
    <!--END MAIN CONTENT-->

  </div>
  <!--col-md-9-->
</div>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search