Плагин Lightbox (увеличение изображения) на чистом JavaScript. Адаптивный

jQuery & JavaScript WordSmall

Сегодня мы рассмотрим отличный плагин Lightbox на чистом JavaScript для реализации увеличения изображений в модальном окне и не только. В комплекте своих параметров, плагин позволяет помещать в Lightbox-окно почти любое содержимое, такое как видео, карты, галерею, картинки с описанием. Эта библиотека может пригодиться в разработке страниц Landing page и на других ресурсах.

Плагин GLightbox

В плагине довольно много особенностей. И он не настолько сложный в использовании, главное, разобраться в параметрах. Его возможности можете оценить в демо-просмотре и убедится, на что он способен.

Демо Скачать

Особенности:

  • Вес – всего 11kb
  • Адаптивность – полностью отзывчивый на любом размере экрана
  • Галерея – поддерживает создание галерей
  • Поддержка видео — YouTube, Vimeo, свое
  • Поддержка Iframe – встроить любой iframe
  • Поддержка клавиатурной навигации
  • Поддержка сенсорной навигации
  • Другое

Подключение

<link rel="stylesheet" href="dist/css/glightbox.css">
<script src="dist/js/glightbox.min.js"></script>

или CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<script type="text/javascript">
    const lightbox = GLightbox({ ...options });
</script>

Пример HTML

<!-- Simple image -->
<a href="large.jpg" class="glightbox">
    <img src="small.jpg" alt="image">
</a>

<!-- Video -->
<a href="https://vimeo.com/115041822" class="glightbox2">
    <img src="small.jpg" alt="image">
</a>

<!-- Gallery -->
<a href="large.jpg" class="glightbox3" data-gallery="gallery1">
    <img src="small.jpg" alt="image">
</a>
<a href="video.mp4" class="glightbox3" data-gallery="gallery1">
    <img src="small.jpg" alt="image">
</a>

<!-- Simple Description -->
<a href="large.jpg" class="glightbox4" data-glightbox="title: My title; description: this is the slide desciption">
    <img src="small.jpg" alt="image">
</a>

<!-- Advanced Description -->
<a href="large.jpg" class="glightbox5" data-glightbox="title: My title; description: .custom-desc1">
    <img src="small.jpg" alt="image">
</a>
<div class="glightbox-desc custom-desc1">
    <p>The content of this div will be used as the slide description</p>
    <p>You can add links and any HTML you want</p>
</div>
Опция Тип По умолчанию Описание
selector Строка glightbox Название класса элемента
elements Массив null Вместо передачи селектора, вы можете передать в галерею все элементы, которые вы хотите.
skin Строка clean Имя скина, он добавит класс в лайтбокс, чтобы вы могли стилизовать его с помощью css.
openEffect Строка zoomIn Название эффекта на лайтбоксе при открытии. (zoom, fade, none)
closeEffect Строка zoomOut Название эффекта при закрытии лайтбокса. (zoom, fade, none)
slideEffect Строка slide Название эффекта при смене слайдов. (slide, fade, zoom, none)
moreText Строка See more Текст для описания на мобильных устройствах.
moreLength Число 60 Количество символов для отображения в описании перед добавлением дополнительной текстовой ссылки (только для мобильных телефонов), если 0, то будет отображаться все описание.
closeButton Логический true Показать или скрыть кнопку закрытия.
touchNavigation Логический true Включение или отключение сенсорной навигации.
keyboardNavigation Логический true Включение или отключение навигации по клавиатуре.
closeOnOutsideClick Логический true Закрытие лайтбокса при щелчке за пределами активного слайда.
startAt Число 0 Запустить лайтбокс с определенным индексом.
width Число 900 По умолчанию для встроенных элементов и iframes можно задать определенный размер на каждом слайде.
height Число 506 Высота по умолчанию для встроенных элементов и iframes. Вы можете определить определенный размер на каждом слайде. Для встроенных элементов вы можете установить высоту на авто.
videosWidth Число 960 Ширина по умолчанию для видео. Видео реагируют, поэтому высота не требуется.
descPosition Строка bottom Глобальное положение для описания слайдов, вы можете определить определенное положение на каждом слайде (bottom, top, left, right).
loopAtEnd Логический false Скольжение петли на конце.
svg object {} Установить собственные иконки SVG
autoplayVideos Логический true Автозапуск видео при открытии лайтбокса.
plyr object {} Параметры видеоплеераs.
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code