Веб-дизайн / 7.7

“

В этом уроке мы рассмотрим программирование на стороне клиента. Клиентское программирование осуществляется с помощью языка JavaScript, на изучение которого требуется время, и это точно не один урок. Поэтому в этом уроке мы не будем изучать JavaScript с нуля, но посмотрим как можно использовать уже готовые решения.

Глоссарий

Для успешного освоения материала рекомендуем вам изучить следующие понятия:

Крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки

Место, где хранятся и поддерживаются какие-либо данные

Независимо компилируемый программный модуль, динамически подключаемый к основной программе и предназначенный для расширения и/или использования ее возможностей

Сжатый файл, в котором все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Сделано это для увеличения скорости загрузки страницы

Форма представления информации, при которой содержимое двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру»

Фрагмент программного кода, к которому можно обратиться из другого места программы

Сообщение, которое возникает в различных точках исполняемого кода при выполнении определенных условий

Видеолекция

Конспект

Поиск плагина

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

В качестве плагина возьмем lightgallery.js.

На сайте плагина в документации указано, что галерею можно скачать с помощью Bower, Npm или с Github, после чего нужно подключить стили, скрипты и дополнительные библиотеки по необходимости. Там же приведен пример разметки.

Скачивание плагина

1. С сайта переходим на GitHub и скачиваем код с репозитория.

2. Распаковываем скачанный zip-архив.

3. В папке Dist находится все, что нам потребуется для работы.

Установка плагина

1. Копируем стили и скрипты.

Первым делом копируем минифицированные файлы стилей lg-transitions.min.css и lightgallery.min.css в нашу папку со стилями. Теперь то же самое делаем со скриптом lightgallery.min.js. Скрипт необходимо скопировать в папку assets/js.

2. Копируем стили и скрипты.

<link rel="stylesheet" href="assets/css/lightgallery.min.css">
<link rel="stylesheet" href="assets/css/lg-transitions.min.css">

Скрипт подключается с помощью тега script с указанием атрибута src, где указывается путь к файлу. Подключаем скрипт в конце страницы, перед закрывающимся тегом body.

   ...
   <script src="assets/js/lightgallery.min.js"></script>
</body>
</html>

Делается это потому, что весь код страницы выполняется по мере ее подгрузки, и если мы подключим скрипт в начале, то есть шанс, что когда он будет исполняться, то нужного html-кода еще не будет, т.к. script выполнится до рендера html.

3. Приводим HTML к нужному виду.

К счастью структура, которая требуется в плагине, не очень отличается от нашей, поэтому мы ее копируем и заменяем ссылки картинок на наши.

<div id="lightgallery">
   <a href="assets/img/placeholder.jpg">
      <img src="assets/img/placeholder.jpg" />
   </a>
</div>

4. Активация плагина.

Активировать работу плагина нужно либо в отдельном js файле, либо можно написать script тег после подключения библиотеки.

<script src="assets/js/lightgallery.min.js"></script>
<script>
   ...
</script>

Копируем сюда код из документации и смотрим что получилось. 

<script>
   lightGallery(document.getElementById('lightgallery'));
</script>

Галерея, конечно, по внешнему виду сломалась, но по функционалу она работает.
Видим, что кнопки не отображаются и, скорее всего, потому что нет нужных шрифтов.

5. Добавляем шрифты.

В папке Dist были эти файлы, поэтому копируем папку Fonts в наш проект и проверяем отображение плагина.

Теперь все кнопки корректно отображаются, и нам остается только привести галерею к прежнему виду.

6. Приведение галереи к прежнему виду.

Для этого укажем классы, которые мы использовали ранее, и продублируем картинки, чтобы их снова было 9.

<div id="lightgallery" class="gallery">
    <a class="img-wrapper" href="assets/img/placeholder.jpg">
        <img src="assets/img/placeholder.jpg" />
    </a>
    ...
    <a class="img-wrapper" href="assets/img/placeholder.jpg">
        <img src="assets/img/placeholder.jpg" />
    </a>
</div>

Галерея выглядит как и раньше, но теперь она работает как галерея.

Скролл при клике на кнопки

На нашей странице все кликабельно, кроме кнопок на первом экране. Давайте реализуем прокрутку к нужной секции при клике на соответствующую кнопку.

1. Задаем идентификаторы секциям.

Для этого нам потребуется задать идентификаторы для заголовков секций. Первому заголовку укажем идентификатор about, а второму portfolio.

...
<h2 id="about">Обо мне</h2>
...
<h2 id="portfolio">Портфолио</h2>
...

2. Способы скролинга страницы.

Есть несколько способов для скрола. Например, window. scroll с параметрами x и y.

window.scroll(0, 400)

Но этот способ не дает плавной прокрутки, и нам нужно вычислить Y для каждой секции.

Будем использовать другой способ. Обратимся к соответствующему элементу с помощью функции document. querySelector, укажем селектор элемента, к которому обращаемся, и вызовем функцию scrollIntoView.

document.querySelector('#about').scrollIntoView()

Теперь страница будет скролить к этому элементу.

3. Делаем прокрутку.

Чтобы прокрутка была плавной, мы должны передать объект со свойством behavior и значением smooth.

document.querySelector('#about').scrollIntoView({
    behavior: 'smooth' 
})

Теперь прокрутка будет плавная.

4. Создание функции прокрутки.

В ранее созданном скрипте создаем функцию smoothScroll и пишем там этот код.

<script>
    ...

    function smoothScroll() {
        document.querySelector('#about').scrollIntoView({
            behavior: 'smooth'
        });
    }
</script>

Теперь вместо конкретного селектора будем указывать аргумент selector, который будет принимать наша функция.

function smoothScroll(selector) {
    document.querySelector(selector).scrollIntoView({
         behavior: 'smooth'
    });
}

5. Вызов функции.

Для ссылок укажем действие onclick, т.е. действие при клике. Это будет вызов нашей функции с указанием секции, к которой нужно проскролить страницу.

<a class="btn btn-bg" onclick="smoothScroll('#about')" href="#">Узнать больше</a>
<a class="btn btn-outline" onclick="smoothScroll('#portfolio')" href="#">Нанять меня</a>

Поскольку клик будет по ссылке, нужно отменить стандартное поведение ссылки. Для этого будем вызывать функцию preventDefault для текущего события event.

function smoothScroll(selector) {
    event.preventDefault();

    document.querySelector(selector).scrollIntoView({
         behavior: 'smooth'
    });
}

Теперь при клике на кнопку страница будет плавно прокручиваться к нужной секции.

“

Вы узнали, как можно найти JavaScript библиотеку и использовать ее в своих проектах, но нужно обращать внимание на лицензию, с которой распространяется та или иная библиотека. Библиотека, которую мы использовали, является бесплатной для OpenSource проектов, но для коммерческих проектов ее нужно купить. Обязательно повторите этот урок, чтобы закрепить знания, и скачайте еще какие-нибудь библиотеки для практики.

Дополнительные материалы

Менеджер пакетов для Интернета

Менеджер пакетов, входящий в состав Node.js

Правовой инструмент, определяющий использование и распространение программного обеспечения, защищенного авторским правом

Введение
JavaScript для начинающих: плюсы, минусы и подводные камни

Учебники
Современный учебник JavaScript

Дальнейшее развитие
Путь развития frontend разработчика

Чем занимаются фронтенд-разработчики, и почему они всем так нужны

For Web – фронтенд, дизайн, программирование

Интерактивное задание

Тест