'Trying to adjust this code to work for multiple galleries on one page

I'm not sure how to adjust the JavaScript to have it work with multiple galleries on the same page. When I try to create a second gallery every thumbnail I click ends up changing the image on the first gallery.

var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";

function preview(img) {
  document.getElementById(lastImg).className = "thumb";
  img.className = "thumb selected";
  document.getElementById(0).src = img.src;
  lastImg = img.id;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

.image,
.thumb {
  width: 100%;
  height: 100%;
}

#product-image-wrap {
  position: relative;
  float: left;
  width: 250px;
  height: 325px;
  margin: 50px 0 50px 50px;
}

#product-image {
  position: relative;
  float: left;
  width: 250px;
  height: 250px;
  border: 1px solid #d0d0d0;
  padding: 20px;
  cursor: pointer;
  display: inline-block;
  transition: 0.9s;
}

#product-image:hover {
  opacity: 0.7;
}

.product-image-thumbnail {
  position: relative;
  float: left;
  width: 55px;
  height: 55px;
  border: 1px solid #d0d0d0;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
  transition: 0.9s;
}

.product-image-thumbnail:hover {
  opacity: 0.7;
}

.product-image-thumbnail-spacer {
  position: relative;
  float: left;
  width: 10px;
  height: 130px;
}

<body>
  <div id='product-image-wrap'>
    <!-- Main -->
    <div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>
    <!-- Thumbs -->
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>
  </div>
</body>

https://jsfiddle.net/uo6js5v7/

Solution 1:^[1]

Get rid of all those ids and just use classes; Find the parent wrapper and then the element you wish to use to display the image within that.

const thumbs = document.querySelectorAll(".thumb");
thumbs.forEach(el => {
  el.addEventListener('click', (event) => {
    let container = event.currentTarget.closest(".product-image-wrap");
    let displayHere = container.querySelector('.image-display');
    displayHere.src = event.currentTarget.src;
  });
});

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

.image-display,
.thumb {
  width: 100%;
  height: 100%;
}

.product-image-wrap {
  position: relative;
  float: left;
  width: 250px;
  height: 325px;
  margin: 50px 0 50px 50px;
}

.product-image {
  position: relative;
  float: left;
  width: 250px;
  height: 250px;
  border: 1px solid #d0d0d0;
  padding: 20px;
  cursor: pointer;
  display: inline-block;
  transition: 0.9s;
}

.product-image:hover {
  opacity: 0.7;
}

.product-image-thumbnail {
  position: relative;
  float: left;
  width: 55px;
  height: 55px;
  border: 1px solid #d0d0d0;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
  transition: 0.9s;
}

.product-image-thumbnail:hover {
  opacity: 0.7;
}

.product-image-thumbnail-spacer {
  position: relative;
  float: left;
  width: 10px;
  height: 130px;
}

<div class='product-image-wrap'>
  <div class='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' class='image-display' alt='image 0'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' class='thumb' alt='image 0'></div>
  <div class='product-image-thumbnail-spacer'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' class='thumb' alt='image 2'></div>
  <div class='product-image-thumbnail-spacer'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' class='thumb' alt='image 3'></div>
  <div class='product-image-thumbnail-spacer'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' class='thumb' alt='image 4'></div>
</div>
<div class='product-image-wrap'>
  <div class='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' class='image-display' alt='image 0'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' class='thumb' alt='image 0'></div>
  <div class='product-image-thumbnail-spacer'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' class='thumb' alt='image 2'></div>
  <div class='product-image-thumbnail-spacer'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' class='thumb' alt='image 3'></div>
  <div class='product-image-thumbnail-spacer'></div>
  <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' class='thumb' alt='image 4'></div>
</div>

Solution 2:^[2]

I've made the following minor changes to allow your gallery panel to be duplicated with each copy operating independently.

I changed the id attribute of the container division product-image-wrap to a class attribute (so the same div can be used repeatedly) and altered the style sheet accordingly (swapping # for .
I deleted the javascript and used a simple 'family tree' reference to the main display image from any of the thumb nails, and added it to the onlick event of each thumbnail:

onclick='this.parentNode.parentNode.children[0].children[0].src = this.src'

The container div can now be reused as many times as you like on the same page without conflict between them.

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

.image,
.thumb {
  width: 100%;
  height: 100%;
}

.product-image-wrap {
  position: relative;
  float: left;
  width: 250px;
  height: 325px;
  margin: 50px 0 50px 50px;
}

#product-image {
  position: relative;
  float: left;
  width: 250px;
  height: 250px;
  border: 1px solid #d0d0d0;
  padding: 20px;
  cursor: pointer;
  display: inline-block;
  transition: 0.9s;
}

#product-image:hover {
  opacity: 0.7;
}

.product-image-thumbnail {
  position: relative;
  float: left;
  width: 55px;
  height: 55px;
  border: 1px solid #d0d0d0;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
  transition: 0.9s;
}

.product-image-thumbnail:hover {
  opacity: 0.7;
}

.product-image-thumbnail-spacer {
  position: relative;
  float: left;
  width: 10px;
  height: 130px;
}

<body>
  <div class='product-image-wrap'>
    <!-- Main -->
    <div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>
    <!-- Thumbs -->
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 0'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 2'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 3'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 4'></div>
  </div>


  <div class='product-image-wrap'>
    <!-- Main -->
    <div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>
    <!-- Thumbs -->
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 0'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 2'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 3'></div>
    <div class='product-image-thumbnail-spacer'></div>
    <div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='this.parentNode.parentNode.children[0].children[0].src = this.src' alt='image 4'></div>
  </div>


</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mark Schultheiss
Solution 2	Dave Pritlove

'Trying to adjust this code to work for multiple galleries on one page

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]