Skip to content

Latest commit

 

History

History

skateboard-gallery

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
css
css
 
 
images
images
 
 
res
res
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Задача 2. Галерея скейтбордов

В рамках домашнего задания к лекции «Объект события»

Описание

Реализовать функционал фотогалереи скейтбордов. При клике на минатюру скейтборда происходит его выбор. При этом пользователь видит увеличенную фотографию и название товара:

Галерея скейтбордов

Интерфейс

При клике на миниатюру фотографии (тег a) товар считается выбранным. Для отображения выбранного товара нужно выполнить несколько условий:

  1. Обозначить миниатюру выбранного товара с помощью класса gallery-current, установив его на тег a. При этом только 1 товар может считаться выбранным и только 1 тег a должен иметь такой класс.

  2. Отобразить увеличенную фотографию в теге <img id="view" class="gallery-view">, считав ссылку на неё из атрибута href тега a, при этом сама ссылка не должна открываться.

Материалы

Изображения для галереи

  • Миниатюры
  1. RESIN
  2. SWALLOW
  3. DA MONSTA
  4. SERAPE
  5. KERRLAGE
  6. USA RESIN
  7. EGGBEATER
  • Большие картинки
  1. RESIN
  2. SWALLOW
  3. DA MONSTA
  4. SERAPE
  5. KERRLAGE
  6. USA RESIN
  7. EGGBEATER

Реализация

В песочнице CODEPEN

В онлайн-песочнице на CODEPEN.

Локально с использованием git

В репозитории на GitHub.

Инструкция по выполнению домашнего задания

В онлайн-песочнице

Потребуется только ваш браузер.

  1. Открыть код в песочнице.
  2. Нажать кнопку «Fork».
  3. Выполнить задание.
  4. Нажать кнопку «Save».
  5. Скопировать адрес страницы, открытой в браузере.
  6. Прислать скопированную ссылку через личный кабинет на сайте netology.ru.

Локально

Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.

  1. Клонировать репозиторий с домашними заданиями git clone https://github.com/netology-code/hj-homeworks.git.
  2. Перейти в папку задания cd hj-homeworks/event-object/skateboard-gallery.
  3. Выполнить задание.
  4. Создать репозиторий на GitHub или BitBucket.
  5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
  6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
  7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.