Показать сообщение отдельно
  #8 (permalink)  
Старый 17.02.2017, 15:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

slavAAvals,
window.addEventListener('DOMContentLoaded', function() {

  // HTML коллекция картинок
var imgClass = document.getElementsByClassName("list-img__foto");
// Делаем из неё массив
var collection = Array.prototype.slice.call(imgClass);

// Кнопки управления

var btnLeft = document.querySelector('.gallery-item__left-btn');
var btnRight = document.querySelector('.gallery-item__right-btn');

// Скрытое меню
var fotoGallery = document.querySelector('.kap-show__gallery');

//Скрытый img менюшки
var hiddenImg = document.getElementById('hiddenImg')

//  Кнопка для закрытия меню
var closeGallery = document.querySelector('.gallery-item__close');

var index = 0;

collection.forEach(function(img,i) {
        img.addEventListener('click', function(event) {
          event.preventDefault();
          index = i;
          show()
        },false);
    });


closeGallery.addEventListener('click', function(e) {
    e.preventDefault();
    fotoGallery.classList.add('kap-show__hidden-gallery');
},false)

btnLeft.addEventListener('click', function(e) {
    e.preventDefault();
    index--
    index < 0 && (index = collection.length-1);
    show()
    ;
},false)

btnRight.addEventListener('click', function(e) {
    e.preventDefault();
    index++
    index >= collection.length && (index = 0);
    show()
},false)

function show() {
    fotoGallery.classList.remove('kap-show__hidden-gallery');
    hiddenImg.src = collection[index].src;
};
   });
Ответить с цитированием