Создание простой галереи изображений

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

Опубликовано 03.03.2025
Просмотры 21
Автор
Рек. время прохождения 3 минуты
Упражнений 5
Комментарии 0
Тренажер JavaScript: Покоряем HTML DOM

Эта серия упражнений поможет вам отточить навыки манипулирования HTML DOM с помощью JavaScript. Вы будете работать с готовой HTML-структурой и CSS-стилями, чтобы шаг за шагом создать функциональную галерею изображений. Задания начинаются с основ выбора элементов и постепенно усложняются, включая добавление обработчиков событий и динамическое изменение атрибутов элементов. Вам нужно будет заполнить пропущенные фрагменты кода JavaScript, чтобы галерея заработала. Каждое задание фокусируется на конкретных методах и свойствах DOM, позволяя закрепить знания на практике и сразу увидеть результат своих действий.

Список тем

Выбор основного изображения

id: 37081_gallery-select-main-image

В HTML-структуре галереи есть основная область для показа крупного изображения. Ваша первая задача — получить ссылку на этот элемент изображения, используя его уникальный идентификатор.

CSS
.gallery {
  max-width: 370px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.thumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnails img:hover {
  border-color: #aaa;
}

.thumbnails img.active {
  border-color: blue;
}
HTML
Восстановить HTML
<div class="gallery">
  <div class="main-image-container">
    <img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
  </div>
  <div class="thumbnails">
    <img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
    <img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
    <img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
    <img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
  </div>
</div>
JavaScript
const mainImage = document.input__1("input__2");

// Для проверки, что элемент выбран, добавим ему рамку (не часть задания)
if (mainImage) {
  mainImage.style.border = "2px solid red";
}
Используйте метод `document.getElementById()` для выбора элемента по его ID. ID нужного элемента — "main-image".
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Выбор всех миниатюр

id: 37081_gallery-select-thumbnails

Теперь нужно получить доступ ко всем изображениям-миниатюрам. Они находятся внутри контейнера с классом "thumbnails". Выберите все элементы `img` внутри этого контейнера.

CSS
.gallery {
  max-width: 370px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.thumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnails img:hover {
  border-color: #aaa;
}

.thumbnails img.active {
  border-color: blue;
}
HTML
Восстановить HTML
<div class="gallery">
  <div class="main-image-container">
    <img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
  </div>
  <div class="thumbnails">
    <img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
    <img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
    <img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
    <img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
  </div>
</div>
JavaScript
const thumbnails = document.input__1("input__2");

// Для проверки добавим рамку всем миниатюрам (не часть задания)
thumbnails.forEach(thumb => {
  thumb.style.border = "2px solid green";
});
Используйте метод `document.querySelectorAll()`, чтобы выбрать все элементы, соответствующие CSS-селектору. Селектор должен указывать на все `img` внутри элемента с классом `thumbnails`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Добавление обработчика клика на миниатюры

id: 37081_gallery-add-click-listener

Чтобы галерея стала интерактивной, нужно реагировать на клики по миниатюрам. Добавьте обработчик событий на каждую миниатюру. Пока что внутри обработчика просто выведите в консоль `src` той миниатюры, по которой кликнули.

CSS
.gallery {
  max-width: 370px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.thumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnails img:hover {
  border-color: #aaa;
}

.thumbnails img.active {
  border-color: blue;
}
HTML
Восстановить HTML
<div class="gallery">
  <div class="main-image-container">
    <img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
  </div>
  <div class="thumbnails">
    <img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
    <img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
    <img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
    <img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
  </div>
</div>
JavaScript
const mainImage = document.getElementById("main-image");
const thumbnails = document.querySelectorAll(".thumbnails img");

thumbnails.input__1(thumbnail => {
  thumbnail.input__2("input__3", function(event) {
    // Получаем элемент, на который кликнули
    const clickedThumbnail = input__4;
    // Выводим его src в консоль
    console.log(clickedThumbnail.input__5);
  });
});
Переберите все найденные миниатюры с помощью цикла (`for` или `forEach`). Для каждой миниатюры используйте метод `addEventListener()`, чтобы добавить обработчик события 'click'. Внутри функции-обработчика получите доступ к элементу, по которому кликнули, через `event.target` (или `this`, если используется function) и выведите его свойство `src` в консоль.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Обновление основного изображения

id: 37081_gallery-update-main-image

Теперь самое главное: при клике на миниатюру нужно обновить основное изображение. Замените вывод в консоль на код, который устанавливает `src` основного изображения равным `src` кликнутой миниатюры.

CSS
.gallery {
  max-width: 370px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  transition: opacity 0.3s ease-in-out;
}

.thumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.thumbnails img:hover {
  border-color: #aaa;
}

.thumbnails img.active {
  border-color: blue;
}
HTML
Восстановить HTML
<div class="gallery">
  <div class="main-image-container">
    <img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
  </div>
  <div class="thumbnails">
    <img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
    <img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
    <img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
    <img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
  </div>
</div>
JavaScript
const mainImage = document.getElementById("main-image");
const thumbnails = document.querySelectorAll(".thumbnails img");

thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener("click", function(event) {
    const clickedThumbnail = event.target;
    // Получаем src кликнутой миниатюры
    const newImageSrc = clickedThumbnail.input__1;

    // Устанавливаем новый src для основного изображения
    mainImage.input__2 = input__3;

    // (Необязательно) Обновляем alt текст основного изображения
    // mainImage.alt = clickedThumbnail.alt;
  });
});
Внутри обработчика события 'click', который вы добавили на предыдущем шаге, получите `src` кликнутой миниатюры (например, через `event.target.src`). Затем установите это значение в качестве `src` для элемента основного изображения (который вы выбрали в первом задании и сохранили в переменной `mainImage`).
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Визуальное выделение активной миниатюры

id: 37081_gallery-highlight-active-thumbnail

Чтобы пользователь видел, какая миниатюра выбрана, добавим визуальное выделение. При клике на миниатюру нужно сначала убрать класс 'active' у всех миниатюр, а затем добавить класс 'active' только той, по которой кликнули. CSS для класса 'active' уже есть.

CSS
.gallery {
  max-width: 370px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.thumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.thumbnails img:hover {
  border-color: #aaa;
}
/* Стиль для активной миниатюры */
.thumbnails img.active {
  border-color: blue;
}
HTML
Восстановить HTML
<div class="gallery">
  <div class="main-image-container">
    <img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
  </div>
  <div class="thumbnails">
    <img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1" class="active">
    <img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
    <img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
    <img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
  </div>
</div>
JavaScript
const mainImage = document.getElementById("main-image");
const thumbnails = document.querySelectorAll(".thumbnails img");

thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener("click", function(event) {
    const clickedThumbnail = event.target;

    // 1. Убираем класс 'active' у всех миниатюр
    thumbnails.forEach(thumb => {
      thumb.input__1.input__2("input__3");
    });

    // 2. Добавляем класс 'active' кликнутой миниатюре
    clickedThumbnail.input__4.input__5("input__6");

    // 3. Обновляем основное изображение
    mainImage.src = clickedThumbnail.src;
    mainImage.alt = clickedThumbnail.alt;
  });
});
Внутри обработчика клика, перед обновлением основного изображения: 1. Переберите все миниатюры (используя переменную `thumbnails`) и у каждой удалите класс 'active' с помощью `element.classList.remove('active')`. 2. После этого добавьте класс 'active' только кликнутой миниатюре (доступной через `event.target` или `this`) с помощью `element.classList.add('active')`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру