Верстка и веб-дизайн. 3 курс. Практическое занятие №5. Фрейм фотогалереи

Вам нужно создать фрейм фотогалереи с семью произвольными фото одинакового размера. Для этого вам потребуются:
I) Параметры стилей в CSS
II) Динамический сценарий движения фото в Javascript
III) Библиотека Font Awesome и иконки навигационных стрелок (шевронов)
IV) HTML, где будут реализована сама фотогалерея.

Подготовительный этап

1) Выбираете 7 фото и загружаете их в репозиторий
2) Подключаете пакет иконок Font Awesome как css, взять его можно либо на официальном сайте Font Awesome, либо здесь: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

либо здесь: https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/font-awesomemin.css

3) Выбираете стрелки навигации, которые будете использовать в фотогалерее: https://fontawesome.com/v4.7.0/icons/ (по запросу chevron, HTML-код шевронов указан под иконками)
Их нужно будет задать увеличенным размером, указав в теге HTML после названия шеврона параметр fa-2x

Если вы берете другие версии Font Awesome, используйте те названия иконок, которые в них приняты!

Параметры стилей в CSS

4) Указываете общий селектор блока фотогалереи: 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

5) Задаете смягчение перехода между картинками:

.gallery img {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

6) Создаете класс gallery и в нем указываете ширину фрейма (width) - у меня 100%, а также отступы, границы и фон.
Можно указать следующие параметры: margin: auto; border: 2px solid #CCC; padding: 5px; background-color: #FFF;

7) В классе фото указываем максимальный размер - также 100%

.gallery img {
  max-width: 100%;
}

8) Позиция основного фото в галерее - отступ и расположение:

.gallery .mainImg {
  position: relative;
  margin-bottom: 15px;
}
.gallery .mainImg img {
  display: block;
  margin: auto;
}

9) Фон, цвет и позиция объектов:

.gallery .mainImg i {
  color: #FFF;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

10) Стрелки - название шеврона укажите ваше (если вы берете другую версию Font Awesome и название иконок у вас отличается. Также проверьте, чтобы имя вашего шеврона совпадало с указанным в JavaScript):

.gallery .mainImg i.fa-chevron-left {
  left: 0;
}
.gallery .mainImg i.fa-chevron-right {
  right: 0;
}

Чтобы стрелки отображались укажите их цвет.

11) Пиктограммы фото в слайдере:

.gallery .thumbnails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.gallery .thumbnails li {
  cursor: pointer;
}
.gallery .thumbnails li:not(:last-child) {
  margin-right: 5px;
}
.gallery .thumbnails li img {
  border: 2px solid #CCC;
  padding: 2px;
  background-color: #FFF;
  opacity: .8;
}

12) Цвет активной пиктограммы - укажите свой:

.gallery .thumbnails li img.active {
  border-color: ?;
  opacity: 1;
}

Динамический сценарий движения фото в JavaScript

13) Указываете функцию запроса картинок:

$(function () {
  'use strict';
  
  $('.mainImg').height($('.mainImg img').height());

14) Динамику при клике на пиктограммы:

  $('.thumbnails img').click(function () {
    $(this).addClass('active').parent().siblings().find('img').removeClass('active');
    $('.mainImg img').hide().attr('src', $(this).attr('src')).fadeIn(300);
  });

15) Динамику при клике на шевроны и условия последовательности элементов:
  
  $('.mainImg i').click(function () {    
    if ($(this).hasClass('fa-chevron-right')) {
      console.log('right');
      if ($('.thumbnails .active').parent().is(':last-of-type')) {
        $('.thumbnails .active').parent().parent().find('li:eq(0)').find('img').click();
      } else {
        $('.thumbnails .active').parent().next().find('img').click();
      }
    } else {
      console.log('left');
      if ($('.thumbnails .active').parent().is(':first-of-type')) {
        $('.thumbnails .active').parent().parent().find('li:last-of-type').find('img').click();
      } else {
        $('.thumbnails .active').parent().prev().find('img').click();
      }
    }
  });
});

16) Сохраняете файл как JavaScript и встраиваете в HTML.

Собственно сам HTML

17) Создаете новое сообщение в блоге и указываете доктайп, язык, кодировку и заголовок:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Gallery</title>

18) Далее перед закрывающим тегом </head> встраиваете сначала файл Font Awesome, а потом ваш CSS.

19) Открываете тег <body> и внутри него создаете класс галереи и основной картинки:

<div class="gallery">
 <div class="mainImg">

20) Указываете какая картинка будет у вас основной:

    <img src="основное фото" alt="">

21) Встраиваете выбранные вами шевроны из Font Awesome

22) Закрываете первый класс
23) Открываете класс пиктограмм. Обратите внимание, что у первой пиктограммы есть дополнительный класс активности. Для каждого фото можно указать название в соответствующем атрибуте тега img:

  <ul class="thumbnails">
<li><img src="фото" alt="" class="active"></li>
<li><img src="фото" alt=""></li>
<li><img src="фото" alt=""></li>
<li><img src="фото" alt=""></li>
<li><img src="фото" alt=""></li>

<li><img src="фото" alt=""></li>
</ul>

24) Закрываете второй класс 
25) Встраиваете библиотеку AJAX через тег <script>:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

либо загружаете ее отсюда и подключаете через репозиторий: 

https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/jquery331min.js

26) Встраиваете ваш JS файл либо из репозитория, либо напрямую.

27) Закрываете тег </body> и </html>.
Если все верно, то галерея будет отображаться как в примере ниже. Ссылки на выполненное задание принимаются до 15:00 5 апреля.

• 
• 
• 
• 
• 
• 
•