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

Отправная точка

Для начала скачайте ZIP файл для примера и распакуйте его содержимое у себя на компьютере.

Вы также можете использовать такие сайты как CodePen, JSFiddle или Glitch для выполнения задания. Вы можете скопировать HTML, CSS и JavaScript в один из этих редакторов. Если онлайн редактор, который вы выбрали, не имеет отдельных панелей для JavaScript/CSS, вы можете выставить код в теги <script>/<style> расположенные на самой HTML странице.

Обзор проекта

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

<h1>Пример фотогалереи</h1>

<div class="full-img">
  <img class="displayed-img" src="images/pic1.jpg" />
  <div class="overlay"></div>
  <button class="dark">Темнее</button>
</div>

<div class="thumb-bar"></div>

Результат выглядит следующим образом:

Наиболее интересные части CSS файла из примера:

• Абсолютно позиционированы три элемента внутри <div class="full-img">: <img>, в котором отображается полноразмерное изображение, пустой <div class="overlay">, размер которого имеет тот же размер, что и <img> помещается прямо над предыдущим div-ом (это используется для нанесения эффекта затемнения на изображение через полупрозрачный цвет фона) и <button>, который используется для управления эффектом затемнения.
• Задана ширина любых изображений внутри <div class="thumb-bar"> (так называемые «уменьшенные изображения») до 20% и размещены слева так, чтобы они следовали друг за другом на линии.

Ваш JavaScript должен:

• Переберите все изображения, и для каждого вставьте элемент <img> внутри thumb-bar <div>, который будет вставлять это изображение на страницу.
• Прикрепите обработчик onclick к каждому <img> внутри thumb-bar <div>, чтобы при нажатии на них соответствующее изображение отображалось в элементе display-img <img>.
• Прикрепите обработчик onclick к кнопке <button>, чтобы при нажатии на неё к полноразмерному изображению был применён эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.

Чтобы лучше понять идею, посмотрите на готовый пример (не заглядывая в исходный код!).

Этапы выполнения

В следующих разделах описывается, что вам нужно делать.

Зацикливание изображений

В файле main.js уже предоставлены строки, в которых хранится ссылка на thumb-bar <div> внутри переменной с именем thumbBar, создают новый элемент <img>, устанавливают его атрибут src на значение placeholder xxx и добавляют этот новый <img> элемент внутри thumbBar.

Нужно сделать:

1. Поместите раздел кода под комментарием /* Looping through images */ внутри цикла, который перебирает все 5 изображений - вам просто нужно перебрать пять чисел, каждое из которых представляет каждое изображение.
2. В каждой итерации цикла замените значение-заполнитель xxx строкой, которая будет равна пути к изображению в каждом случае. Мы устанавливаем значение атрибута src для этого значения в каждом случае. Имейте в виду, что в каждом случае изображение находится внутри каталога изображений, а его имя - pic1.jpg, pic2.jpg и т.д.

Добавление обработчика onclick к каждому уменьшенному изображению

В каждой итерации цикла вам нужно добавить обработчик onclick к текущему newImage:

1. Найдите значение атрибута src текущего изображения. Это можно сделать, запустив функцию getAttribute() в <img> в каждом случае и передав ей параметр «src» в каждом случае. Но как получить изображение? Использование newImage не будет работать, так как цикл завершается до применения обработчиков событий; это приведёт к тому, что значение src последнего <img> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <img> является целью обработчика. Как получить информацию от объекта события?
2. Запустите функцию, передав ей возвращаемое значение src в качестве параметра. Вы можете вызвать эту функцию, как хотите.
3. Эта функция обработчика событий должна установить значение атрибута src displayed-img <img> равным значению src, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <img> в переменной с именем displayedImg. Обратите внимание, что здесь нам нужна определённая именованная функция.

Написание обработчика, который запускает кнопку затемнения / подсветки

Мы уже предоставили строку, в которой хранится ссылка на <button> в переменной btn. Вам нужно добавить обработчик onclick, который:

1. Проверяет текущее имя класса, установленное на кнопке <button> — для этого снова можно использовать getAttribute().
2. Если имя класса "dark", изменяет класс <button> на "light" (с помощью setAttribute()), его текстовое содержимое на "Светлее" и background-color наложения <div> на "rgba (0,0,0,0.5)".
3. Если имя класса не «тёмное», изменяет класс <button> на "dark", его текстовое содержимое обратно на "Темнее" и background-color наложения <div> на "rgba(0,0,0,0)".

Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.

btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

Советы и подсказки

• Вам не нужно каким-либо образом редактировать HTML или CSS.

Оценка

Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю/наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему обсуждения об этом упражнении или в IRC-канале #mdn в Mozilla IRC. Сначала попробуйте упражнение - ничего не выиграть от обмана!

• Назад
• Обзор: Структурные элементы JavaScript