Привет, друзья. Сегодня будет достаточно простенькая статья про адаптивные галереи для сайта, в нашем случае, для обычного лендинга. В большинстве случаев мы не используем никаких CMS при создании посадочных страниц и новичков возникают сложности при создании подобного функционала.
Я уже писал о слайдерах, которыми обычно пользуюсь, но недавно мне написал один из читателей, в раздел "ваши предложения", с вопросом как их реализовать на лендинге, а по традиции все что вы спрашиваете там, обычно, в первую очередь превращается в статьи на блоге.
Знаю, для некоторых статья не актуальна, но поучаствуйте хотя бы в комментариях и подскажите, каким скриптом или своим решением пользуетесь вы. Ведь мнение о том, что использование каких-то готовых jQuery-плагинов для создания галерей и модальных окон - это преступление в 2019 году очень даже распространено. К какой категории относитесь вы?
Мне, например, обычно лень делать свою галерею, а вот модальные окна последние 2 - 3 года - это да, делаю на чистом js, или, если проект использует jQuery, то применяю его, но не подключаю отдельный плагин.
Вернемся к галерее изображений.
Скрипты адаптивных галерей изображений для лендинга
Обычно, для реализации подобного функционала я использую 1 из двух плагинов. В 90% случаев, они полностью закрывают потребность заказчика в галерее. Это:
Обычно, это все же 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.
Демо
Записал небольшое видео с примером работы плагина прямо с сайта разработчиков.
2 комментария
Спасибо, работает!
А у меня наоборот задача - сделать плитку из 5 - 6 изображений. Именно адаптивную и чтобы с каждого изображения проваливаться на страницу карточки товара.
А из плагинов для галереи стоит fancybox. Он на Битриксе хорошо работает, не тормозит.