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

Вам нужно создать фрейм фотогалереи с семью произвольными фото одинакового размера. Для этого вам потребуются:

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

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

- Выбираете 7 фото и загружаете их в репозиторий
- Подключаете пакет иконок 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

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

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

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

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

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

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

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

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

3) Добавляете класс упаковки галереи и ее расположение на странице (при необходимости измените параметры отступа):

.box {

  width: 100%;

  position: absolute;

  margin-top: -400px;

  overflow: auto;

}

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

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

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

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

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

.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;
}

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

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

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

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

.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;
}

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

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

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

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

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

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

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

12) Динамику при клике на шевроны и условия последовательности элементов:
  
  $('.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();
      }
    }
  });
});

13) Сохраняете файл как JavaScript и далее - в соответствующем пункте - встраиваете в HTML.

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

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

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

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

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

16) Открываете тег <body> и внутри него открываете класс упаковки контейнера из третьего пункта.

17) Теперь задаете класс галереи и основной картинки:

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

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

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

19) Встраиваете выбранные вами шевроны из Font Awesome, например, так:

<i class="fa fa-chevron-left fa-2x"></i>

<i class="fa fa-chevron-right fa-2x"></i>

20) Закрываете первый класс
21) Открываете класс пиктограмм. Обратите внимание, что у первой пиктограммы есть дополнительный класс активности. Для каждого фото можно указать название в соответствующем атрибуте тега 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>

22) Закрываете второй класс и класс упаковки контейнера.
23) Встраиваете библиотеку 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

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

25) Закрываете тег </body> и </html>.
Если все верно, то галерея будет отображаться примерно так: https://konoplevdesign3.blogspot.com/p/gallery-frame-webkit-box-sizing-border.html

Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 4 апреля.