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

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/

CodePudding user response：

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>

CodePudding user response：

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>