0

Имеется галерея, при нажатии на стрелки главное изображение меняется, при нажатии на миниатюры изображение тоже меняется. Как сделать, чтобы при нажатии на стрелки главного изображения переключались и миниатюры между друг другом, добавлялся border?

;
(function gallery() {
  var leftArrow = document.getElementById('left_arrow'),
    rightArrow = document.getElementById('right_arrow'),
    initImgNumber = 1;
  maxImgNum = 4;

  leftArrow.addEventListener('click', prev);
  rightArrow.addEventListener('click', next);

  function prev() {
    var image = document.getElementById('mainImage');
    initImgNumber--;
    if (initImgNumber == 0) {
      initImgNumber = maxImgNum
    };
    image.setAttribute('src', 'full/' + initImgNumber + '.png');
  };

  function next() {
    var image = document.getElementById('mainImage');
    initImgNumber++;
    if (initImgNumber > maxImgNum) {
      initImgNumber = 1
    };
    image.setAttribute('src', 'full/' + initImgNumber + '.png');
  };
})();

var thumbnails = Array.prototype.slice.call(document.querySelectorAll('.mini'));

function clickThumb(event) {
  document.querySelector('.mainImage').src = this.dataset.fullUrl;
}
for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', clickThumb);
};
<div id="centerlayer">
  <div class="header">
    <img src="thumbs/header.png" />
  </div>
  <div id="slider">
    <div class="left_arrow">
      <img src="full/left_arrow.png" id="left_arrow" />
    </div>
    <div class="right_arrow">
      <img src="full/right_arrow.png" id="right_arrow" />
    </div>
    <img src="full/1.png" id="mainImage" class="mainImage" />
  </div>
  <div id="thumbs">
    <img src="Thumbs/1.png" class="mini" data-full-url="full/1.png" />
    <img src="Thumbs/2.png" class="mini" data-full-url="full/2.png" />
    <img src="Thumbs/3.png" class="mini" data-full-url="full/3.png" />
    <img src="Thumbs/4.png" class="mini" data-full-url="full/4.png" />
  </div>
</div>

1 ответ 1

1

Решение не идеальное, но рабочее:

var initImgNumber = 0;

(function gallery() {
  var leftArrow = document.getElementById('left_arrow'),
    rightArrow = document.getElementById('right_arrow');

  thumbnails = Array.prototype.slice.call(document.querySelectorAll('.mini'));
  maxImgNum = thumbnails.length;

  leftArrow.addEventListener('click', function() {
    nav(-1);
  });
  rightArrow.addEventListener('click', function() {
    nav(1);
  });

  for (var i = 0; i < thumbnails.length; i++) {
    thumbnails[i].addEventListener('click', clickThumb);
  }
})();

function clickThumb(event) {
  showImage(this.dataset.fullUrl);
}

// нам не нужны две практически одинаковые функции для навигации
// используем одну функцию с параметром
function nav(direction) {
  initImgNumber += direction;
  if (initImgNumber < 0) {
    initImgNumber = maxImgNum - 1;
  } else if (initImgNumber >= maxImgNum) {
    initImgNumber = 0;
  }
  showImage(thumbnails[initImgNumber].getAttribute('data-full-url'));
}

// устанавливаем изображение и подсвечиваем миниатюру
function showImage(path) {
  var image = document.getElementById('mainImage');
  image.setAttribute('src', path);
  for (var i = 0; i < maxImgNum; i++) {
    if (thumbnails[i].getAttribute('data-full-url') != path) {
      thumbnails[i].classList.remove('active');
    } else {
      thumbnails[i].classList.add('active');
      initImgNumber = i;
    }
  }
}
.active {
  border: 2px dashed #000;
}
<div id="centerlayer">
  <div id="slider">
    <div class="left_arrow">
      <img src="full/left_arrow.png" alt="Left arrow" id="left_arrow" />
    </div>
    <div class="right_arrow">
      <img src="full/right_arrow.png" alt="Right arrow" id="right_arrow" />
    </div>
    <img src="https://placehold.it/200/FF0000" id="mainImage" class="mainImage" />
  </div>
  <div id="thumbs">
    <img src="https://placehold.it/40/FF0000" class="mini active" data-full-url="https://placehold.it/200/FF0000" />
    <img src="https://placehold.it/40/00FF00" class="mini" data-full-url="https://placehold.it/200/00FF00" />
    <img src="https://placehold.it/40/0000FF" class="mini" data-full-url="https://placehold.it/200/0000FF" />
    <img src="https://placehold.it/40/fFF000" class="mini" data-full-url="https://placehold.it/200/fFF000" />
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.