Вернуться к уроку

Галерея изображений

важность: 5

Создайте галерею изображений, в которой основное изображение изменяется при клике на уменьшенный вариант.

Результат должен выглядеть так:

Для обработки событий используйте делегирование, т.е. не более одного обработчика.

P.S. Обратите внимание – клик может быть как на маленьком изображении IMG, так и на A вне него. При этом event.target будет, соответственно, либо IMG, либо A.

Дополнительно:

  • Если получится – сделайте предзагрузку больших изображений, чтобы при клике они появлялись сразу.
  • Всё ли в порядке с семантической вёрсткой в HTML исходного документа? Если нет – поправьте, чтобы было, как нужно.

Открыть песочницу для задачи.

Решение состоит в том, чтобы добавить обработчик на контейнер #thumbs и отслеживать клики на ссылках.

Когда происходит событие, обработчик должен изменять src #largeImg на href ссылки и заменять alt на ее title.

Код решения:

var largeImg = document.getElementById('largeImg');

document.getElementById('thumbs').onclick = function(e) {
  var target = e.target;

  while (target != this) {

    if (target.nodeName == 'A') {
      showThumbnail(target.href, target.title);
      return false;
    }

    target = target.parentNode;
  }

}

function showThumbnail(href, title) {
  largeImg.src = href;
  largeImg.alt = title;
}

Предзагрузка картинок

Для того, чтобы картинка загрузилась, достаточно создать новый элемент IMG и указать ему src, вот так:

var imgs = thumbs.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
  var url = imgs[i].parentNode.href;

  var img = document.createElement('img');
  img.src = url;
}

Как только элемент создан и ему назначен src, браузер сам начинает скачивать файл картинки.

При правильных настройках сервера как-то использовать этот элемент не обязательно – картинка уже закеширована.

Семантичная верстка

Для списка картинок используется DIV. С точки зрения семантики более верный вариант – список UL/LI.

Открыть решение в песочнице.