Адаптивная галерея для лендинг пейдж

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

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

Знаю, для некоторых статья не актуальна, но поучаствуйте хотя бы в комментариях и подскажите, каким скриптом или своим решением пользуетесь вы. Ведь мнение о том, что использование каких-то готовых jQuery-плагинов для создания галерей и модальных окон - это преступление в 2019 году очень даже распространено. К какой категории относитесь вы?

Мне, например, обычно лень делать свою галерею, а вот модальные окна последние 2 - 3 года - это да, делаю на чистом js, или, если проект использует jQuery, то применяю его, но не подключаю отдельный плагин.

Вернемся к галерее изображений.

Скрипты адаптивных галерей изображений для лендинга

Обычно, для реализации подобного функционала я использую 1 из двух плагинов. В 90% случаев, они полностью закрывают потребность заказчика в галерее. Это:

• fancybox
• lightbox

Обычно, это все же fancybox. На его примере и покажу как создавать простую галерею для фотографий. Иногда, приходится комбинировать этот скрипт с другими плагинам для создания слайдера Owl carousel или Slick slider, о которых я рассказывал в отдельной статье. Получается довольно симпатично и не конфликтует.

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

Fancybox

Итак, почему fancybox? Да потому, что легко подключается, прост в использовании и подходит для любого типа контента, а не только изображений. Поддерживает жесты, работает с атрибутами, не захламляя разметку, поддерживает привязку к динамически добавляемым элементам и многое другое. Наверное, ко многим плагинам подходит, но я ничего проще не встречал.

Подключение

Убеждаемся, что подключен jQuery и после него цепляем файлы плагина. Кстати, проект лежит на jsDelivr, так что можно использовать их CDN и подключать плагин оттуда.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

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

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

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

Но fancybox можно использовать и как модальное окно для любого другого типа контента, например, вызвать контактную форму или уведомление об оплате. Делается это путем создания контейнера с уникальным "id", который изначально скрыт. Конечно лучше в стилях, но для примера можно так:

<div style="display: none;" id="hidden-content">
	<h2>Привет</h2>
	<p>Текст модального окна</p>
</div>

Вызываться оно будет следующим образом:

<a data-fancybox data-src="#hidden-content" href="javascript:;">
	Вызов окна
</a>

Попробуйте, все очень просто. Если хотите более гибко настроить плагин, загляните в документацию. Там много дополнительных настроек позволяющих менять внешний вид, эффекты переходов, длительность анимации открытия и закрытия, добавление своих классов и многое другое. Кроме того, есть API.

Демо

Записал небольшое видео с примером работы плагина прямо с сайта разработчиков.