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

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

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

1) Выбираете 7 фото и загружаете их в google sites
2) Подключаете пакет иконок Font Awesome как css, взять его можно здесь: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
3) Выбираете стрелки навигации, которые будете использовать в фотогалерее: https://fontawesome.com/v4.7.0/icons/ (по запросу chevron, HTML-код шевронов указан под иконками)
Их нужно будет задать увеличенным размером, указав в теге HTML после названия шеврона параметр fa-2x

Параметры стилей в 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) Стрелки - название шеврона укажите ваше (если оно отличается):

.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: #c0392b;
  opacity: 1;
}

13) Сохраняете файл как css и затем подключаете в HTML перед закрывающим тегом </head>

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

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

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

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

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

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

17) Сохраняете файл как JavaScript и загружаете его на google sites

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

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

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

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

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

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

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

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

    <img src="https://sites.google.com/site/konoplevmedia/outsubs.jpg" alt="">

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

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

  <ul class="thumbnails">
<li><img src="https://sites.google.com/site/konoplevmedia/outsidesub.jpg" alt="" class="active"></li>
<li><img src="https://sites.google.com/site/konoplevmedia/downthesub.jpg" alt=""></li>
<li><img src="https://sites.google.com/site/konoplevmedia/traincome.jpg" alt=""></li>
<li><img src="https://sites.google.com/site/konoplevmedia/trainmove.jpg" alt=""></li>
<li><img src="https://sites.google.com/site/konoplevmedia/subpassengers.jpg" alt=""></li>

<li><img src="https://sites.google.com/site/konoplevmedia/insidesub.jpg" alt=""></li>
</ul>

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

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

27) Аналогичным образом встраиваете ваш JS файл

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

• 
• 
• 
• 
• 
• 
•