KrnRbts KrnRbts - 2 months ago 16
HTML Question

Adding arrows to image gallery - JS

Reasonably new to JavaScript and Stackoverflow, I'm just trying to add clickable buttons to an image gallery.

I am currently a little lost as to the next step in the JavaScript, any tips on how to cycle through the images would be great.

Cheers

https://jsfiddle.net/KrnRbts/2x7Lkqqv/

"use strict";
(function() {
var thumbnails = document.querySelectorAll('.gallery__img'), //target thumbnail images,
imageMain = document.querySelector('.image-main'); //target main image
var leftArrow = document.querySelector('.material-icons left-btn'),
rightArrow = document.querySelector('.material-icons right-btn');
var currentIndex = 0;

for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('click', function(evt) {
imageMain.src = evt.target.src.replace('150/100', '1000/400');
});
}

function arrows() {
thumbnails.click();
}

function moveLeft(leftArrow){
for (var j = 0; j < currentIndex.length; j--){
currentIndex--;
}
}

function moveRight(rightArrow){
for (var j = 1; j < currentIndex.length; j++){
currentIndex++;
}
}

})();



<div class="gallery__wrapper">
<div class="image-main__wrapper">
<img class="image-main" src="https://unsplash.it/g/1000/400?image=0">
<div id="arrows">
<i class='material-icons left-btn'>chevron_left</i>
<i class='material-icons right-btn'>chevron_right</i>
</div>
<div class="image-thumbnails__wrapper">
<ul class="thumbnails">
<li><img id="thumb-1" class="gallery__img" src="https://unsplash.it/g/150/100?image=1"></li>
<li><img id="thumb-2" class="gallery__img" src="https://unsplash.it/g/150/100?image=2"></li>
<li><img id="thumb-3" class="gallery__img" src="https://unsplash.it/g/150/100?image=3"></li>
<li><img id="thumb-4" class="gallery__img" src="https://unsplash.it/g/150/100?image=4"></li>
<li><img id="thumb-5" class="gallery__img" src="https://unsplash.it/g/150/100?image=5"></li>
<li><img id="thumb-6" class="gallery__img" src="https://unsplash.it/g/150/100?image=6"></li>
<li><img id="thumb-7" class="gallery__img" src="https://unsplash.it/g/150/100?image=7"></li>
<li><img id="thumb-8" class="gallery__img" src="https://unsplash.it/g/150/100?image=8"></li>
</ul>
</div>
</div>
</div>

Answer

Here a fiddle with the solution: https://jsfiddle.net/99x4a1da/

"use strict";
(function() {
  var thumbnails = document.querySelectorAll('.gallery__img'), //target thumbnail images,
      imageMain = document.querySelector('.image-main'); //target main image
  var leftArrow = document.querySelector('.material-icons.left-btn'),
      rightArrow = document.querySelector('.material-icons.right-btn');
  var currentIndex = 0;

  for (var i = 0; i < thumbnails.length; i++) {
      thumbnails[i].addEventListener('click', function(evt) {
        imageMain.src = evt.target.src.replace('150/100', '1000/400');
        currentIndex = evt.target.id.substr(6, evt.target.id.length) - 1;
    });
  }
  leftArrow.addEventListener('click', function(evt) {
    if (currentIndex > 0) {
        currentIndex--;
        imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400');
    }
  });

   rightArrow.addEventListener('click', function(evt) {
     if (currentIndex < thumbnails.length -1) {
          currentIndex++;
          imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400');
      }
  });


})();

Explanation: You add a click listener to the two arrow buttons. At the first load of the page, the index will be at 0. So you only have to keep track of the index, no matter if it's a arrow click or a thumbnail click. Of course you need to check if going to the previous or next is allowed or if you're already at the last element. For detecting which thumbnail has been clicked to update the current index - different approaches would be possible. Here the id of the <img> tags is used for that.

Tell me if you have questions.

Comments