Галерея

[Mixail.09]

Здравствуйте.

Решаю задачку по создании галереи. Есть большое изображение и внизу галерея иконок. Так вот хотел сделать следующим образом:

<p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p> - это главное большое изображение, так вот как я делал, удалял атрибут src, а затем создавал новый атрибут src, но в котором указывалась другая ссылка (ссылку брал из галереи). Беда в том что почему то сразу происходит переход по новой ссылке и изображение открывается в новом окне.

Вот код: http://plnkr.co/edit/BL9kTYBZOLnuF6e8seFG?p=preview

Подскажите в чем ошибка?

[andrey7287]

31 минуту назад, Mixail.09 сказал:

Беда в том что почему то сразу происходит переход по новой ссылке

 1. Это не переход по новой ссылке, а обычный переход. Код вообще не срабатывает, потому что target это узел а не имя узла. 

2. Изучай делегирование, либо переписывай код таким образом, что бы таргетами были только "a".

3. src можешь писать напрямую ( target.src ), тем более не стоит заморачиваться с удалением.

 

ЗЫ Успехов

[Mixail.09]

58 минут назад, andrey7287 сказал:

 

2. Изучай делегирование, либо переписывай код таким образом, что бы таргетами были только "a".

 

Спасибо, вместо target.getAttribute("href") написал target.parentNode.getAttribute('href') - заработало.

Если честно думал что то что я написал и есть делегирование?

[andrey7287]

17 часов назад, Mixail.09 сказал:

Если честно думал что то что я написал и есть делегирование?

Так то да, только твой код потенциально ошибочный (кликни по самому краю картинки) . По этому либо не используй делегирование, либо используй его правильно .

galery.onclick = function(event){
      event.preventDefault();
      var target = event.target;
      while (target.id ==! 'thumbs'){
        if (target.nodeName == 'A') {
           bigImage.src = target.href;
           return;
        }
        target = target.parentNode;
      }
    }

 

[Mixail.09]

4 часа назад, andrey7287 сказал:

Так то да, только твой код потенциально ошибочный (кликни по самому краю картинки) . По этому либо не используй делегирование, либо используй его правильно .

galery.onclick = function(event){
      event.preventDefault();
      var target = event.target;
      while (target.id ==! 'thumbs'){
        if (target.nodeName == 'A') {
           bigImage.src = target.href;
           return;
        }
        target = target.parentNode;
      }
    }

 

Да, спасибо вроде бы разобрался.

То есть в цикле while будет перебираться target каждый раз присваивая ему родительский элемент,  пока в нем не окажется ссылка 'A' либо пока не while (target.id ==! 'thumbs'). То есть насколько я понял это нужно для того чтобы код корректно работал, когда внутри целевого элемента есть вложенные элементы, и клики попадают на них.

[andrey7287]

Да. У кантора есть хороший пример с таблицей.