Верстка и веб-дизайн. 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 апреля.

https://elizavetauharskih25.blogspot.com/2025/04/5.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://yanniiish.blogspot.com/2025/04/5.html
ОтветитьУдалитьОценка "отлично"
УдалитьАнастасия Федякина https://nastuuuuuushk.blogspot.com/2025/04/03-2025-3-5.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://ovchinnikova2004.blogspot.com/2025/04/praktika-5.html
ОтветитьУдалитьНе принято. Не работает ссылка на ваш javascript и css. Жду исправленный вариант.
Удалитьhttps://albinazhipovacoding.blogspot.com/2025/04/5.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://forfem74.blogspot.com/2025/04/blog-post.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://huhanochka.blogspot.com/2025/04/praktika-5.html я пыталась исправить, но стало только хуже и теперь там ничего..
ОтветитьУдалитьУ вас много ошибок: ни одна картинка не встроена, ссылок в HTML на фото нет вообще; ваш JavaScript отсутствует, подключена только библиотека, тег div в галерее закрыт после конечного тега html, а не перед библиотекой JavaScript. Жду исправленный вариант.
Удалитьhttps://huhanochka.blogspot.com/2025/04/praktika-kotiki.html
УдалитьОценка "отлично"
Удалитьhttps://polinagorbunova.blogspot.com/2025/04/05042025.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://smotrikisa.blogspot.com/2025/04/gallery-function-use-strict.html
ОтветитьУдалитьОценка "отлично"
Удалить