Ванильная галерея js

148

21 марта 2018, 06:46

Господа пробую писать простую галерею с переключением картинки на js. Из банальных примеров нашёл вот что. Что понял - закомментил. Прошу помощь разжевать код или заменить более простым.

    var largeImg = document.getElementById('largeImg');// находим главную 
    document.getElementById('thumbs').onclick = function(event) { //по нажатию ловим событие блока thumbs 
        var target = event.target; //как понимаю элемент который нажали 
 
        while (target != this) { //здесь теряюсь, если нажатый эл. не из thumbs тогда 
 
            if (target.nodeName == 'A') { //если родитель не А? не понял, ссылка просто "а" 
            showThumbnail(target.href, target.title);//запуск функции  
 и запись вытянутых параметров из нажатого элемента  
            return false; // ? 
            } 
 
            target = target.parentNode; //если иф не отработал - то? 
        } 
} 
 
function showThumbnail(href, title) { // сама функция присвоения новых параментов  
  largeImg.src = href; 
  largeImg.alt = title; 
}

  #largeImg { 
    border: solid 1px red; 
    width: 550px; 
    height: 400px; 
    padding: 5px; 
  } 
   
  #thumbs a { 
    border: solid 1px blue; 
    width: 200px; 
    height: 200px; 
    padding: 3px; 
    margin: 2px; 
    float: left; 
  } 
   
  #thumbs a:hover { 
    border-color: #FF9900; 
  }

<div class="section"> 
    <div class="container"> 
        <div class="row"> 
  <p><img id="largeImg" src="./img/bmwx6.jpg" alt="Large image"></p> 
</div> 
<div class="row"> 
  <div id="thumbs"> 
    <a href="./img/auto1.jpg" title="Image 3"><img src="./img/auto1.jpg" width="100%" height="100%"></a> 
    <a href="./img/auto2.jpg" title="Image 4"><img src="./img/auto2.jpg" width="100%" height="100%"></a> 
    <a href="./img/avtoservice.jpg" title="Image 5"><img src="./img/avtoservice.jpg" width="100%" height="100%"></a> 
    <a href="./img/banner.jpg" title="Image 6"><img src="./img/banner.jpg" width="100%" height="100%"></a> 
  </div> 
</div> 
</div> 
</div>

Answer 1

// главное изображение, далее ему будет подставляться ссылка на изображение, 
// по миниатюре которого будет клик
var largeImg = document.getElementById('largeImg');
// слушаем клик на всей галерее
document.getElementById('thumbs').onclick = function(event) {
// определяем объект в дереве thumbs, на котором непосредственно и был клик    
var target = event.target;
// если клик не по thumbs (как верхнему родителю), подразумевается клик по изображению (по одному из потомков)
while (target != this) { 
    // если кликнули по тегу <a>
    if (target.nodeName == 'A') {
        // вызываем пользовательскую функцию, в неё передаём атрибуты
        // href и title "кликнутой" ссылки
        showThumbnail(target.href, target.title);
        // и успокаиваемся до следующего акшОна
        return false; 
        }
        // если клик был не по тегу <a>, смотрим родительский по отношению
        // к "кликнутому" элемент и погнали снова.
        target = target.parentNode; 
    }
}
// да да да
function showThumbnail(href, title) { 
    largeImg.src = href;
    largeImg.alt = title;
}