Как сделать лайтбокс css
Добавил пользователь Alex Обновлено: 05.10.2024
Создайте адаптивную эффектную галерею с использованием красивой анимации. Потрясающий лайтбокс для изображений и видео с широкими возможностями. Использование. Примеры.
Компонент Лайтбокс полностью отзывчивый и поддерживает сенсорную и свайп (swipe) навигацию, а также перелистывание мышью на ПК. При переходах между слайдами анимация буквально прилипает к кончику пальца или курсору мыши. Чувствительность на высоте! Быстро нажимая на предыдущую и следующую навигацию, анимация будет ускоряться, чтобы не отставать от вашего темпа. Для более плавной работы все анимации аппаратно-ускоренные.
Применение
Галерея Lightbox
Чтобы применить компонент Lightbox , добавьте в контейнер атрибут uk-lightbox , чтобы превратить все анкоры внутри этого контейнера в ссылки лайтбокса.
Атрибут alt
Чтобы добавить атрибут alt к изображению в лайтбоксе, установите атрибут data-alt и пропишите в него необходимую информацию.
Описание под картинкой
Чтобы разместить текстовое описание, подпись внизу лайтбокса, установите атрибут data-caption и пропишите в него необходимую информацию.
Анимации
По умолчанию галерея Lightbox использует анимацию slide . Вы можете изменить анимацию перелистывания добавив в опцию animation выбранное значение. Возможные значения slide , fade и scale .
Примеры Лайтбокс с использованием различных анимаций
Источники контента
Различные источники контента
Лайтбокс не ограничивается одними только изображениями. Другие медиа, такие как видео, также могут отображаться. Чтобы отобразить poster для видео (картинка, которая будет отображаться, пока видео не доступно или не вопроизводится), установите атрибут data-poster .
Видео будет останавливаться всякий раз, когда исчезает с поля зрения, а как только оно снова станет видимым, то будет на той же временной шкале. Это круто!
Тип контента
Указать тип контента
Lightbox использует атрибут href для определения типа связанного содержимого. Если в пути не указано расширение имени файла, просто добавьте атрибут data-type в тег .
URL-ы YouTube и Vimeo будут обрабатываться автоматически.
| Опция | Описание |
|---|---|
| data-type="image" | Тип контента - изображение. |
| data-type="video" | Тип контента - видео. |
| data-type="iframe" | Тип контента - обычный сайт. |
Пользовательские атрибуты
Вы можете добавлять пользовательские атрибуты к элементам контента лайтбокса, используя атрибут data-attrs , начиная с версии UIkit 3.4.0. Атрибуты передаются как обычные опции компонента, например data-attrs .
Параметры для атрибута
При использовании компонента Lightbox к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
Lightbox
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
| animation | String | slide | Режим анимации лайтбокса: slide , fade или scale . |
| autoplay | Number | 0 | Автозапуск Lightbox. (Задержка в миллисекундах) |
| autoplay-interval | Number | 0 | Задержка между переключением слайдов в режиме автовоспроизведения. |
| pause-on-hover | Boolean | false | Приостановить режим автозапуска при наведении. |
| video-autoplay | Boolean | false | Lightbox автовоспроизведение видео. |
| index | String, Integer | Отображаемый элемент лайтбокса. Индекс начинается с 0. | |
| toggle | CSS selector | a | Селектор переключателя - открывает панель лайтбокса при нажатии. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
Методы
Для компонента доступны следующие методы:
Показывает панель и элемент лайтбокса.
Скрывает панель лайтбокса.
Параметры панели лайтбокса
Если вы хотите использовать панель лайтбокса только через API JS, вы можете установить следующие параметры.
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
| animation | String | slide | Режим анимации лайтбокса: slide , fade или scale . |
| autoplay | Boolean | false | Автозапуск Lightbox. |
| autoplay-interval | Number | 7000 | Задержка между переключением слайдов в режиме автозапуска. |
| pause-on-hover | Boolean | false | Приостановить режим автовоспроизведения при наведении. |
| video-autoplay | Boolean | false | Автозапуск видео лайтбокса. |
| index | Number | 0 | Начальный элемент для отображения. (начало с нуля) |
| velocity | Number | 2 | Скорость анимации (пиксель / мс). |
| preload | Number | 1 | Количество элементов для предварительной загрузки. (слева и справа от текущего активного элемента) |
| items | Array | [] | Массив элементов для отображения, например, [] |
| template | String | Default markup | Строка шаблона. |
| delay-controls | Number | 3000 | Время задержки до исчезновения элементов управления в мс. |
| container | String | body | Определите целевой контейнер с помощью селектора, чтобы указать, где Lightbox должен быть добавлен в DOM. |
События
Сейчас тяжело представить себе сайт без изображений. Картинки позволяют визуально разгрузить сайт, я имею введу если на сайте много текста, кроме этого, красивая картинка всегда радует глаз. Допустим вы хотите разместить у себя на сайте несколько изображений, при этом красиво оформить их, то есть создать такую небольшую галерею, кроме этого скрасить ее разворотом изображений во весь экран. И так, как вы уже догадались, сегодня мы будем создать достаточно простую галерею для сайта с помощью css3.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Кроме этого галерея адаптируется к широкоформатным мониторам, что весьма необходимо в данное время. Мы будем использовать только трансформации CSS, никаких скриптов мы использовать не будем, дабы упростить по максимуму галерею. И так, приступаем.
Шаг 1. HTML
У нас будет контейнер по середине с содержанием, кроме этого мы добавляем небольшие подписи для каждого изображения:
Галереи, как много мы уже о них писали и приводили различные примеры и конструкции. Но, как говорят, прогресс не стоит на месте, и с каждой минутой все улучшается и становиться лучше, это относиться и к галереям. В данном уроке мы рассмотрим как создать замечательную галерею миниатюр, при нажатии на которую происходит плавная анимация, и изображение раскрывается в определенную величину, казалось все примитивно, и мы такое не раз уже видели, но не так все просто, идея заключается в красивом появлении изображения, в этом и есть вся фишка данного лайтбокса.
В данном уроке мы рассмотрим несколько примеров с различными эффектами появления изображения. Данная галерея отлично подойдет для любого сайта-портфолио, или простого фотосайта, которому веб-мастер хочет придать особую изюминку, которой нет в других сайтах аналогичной тематики.
Следует заметить, что в уроке мы будем использовать изображения, от Joanna Kustra, они используются на условиях лицензии Attribution-NonCommercial 3.0 Unported Creative Commons License.
Для начала мы рассмотрим структуру HTML. Сначала создадим набор миниатюр, каждая из которых имеет название, которое будет отображаться при наведении курсора. При нажатии на миниатюру, мы будем показывать большую версию изображения в блоке с классом lb-overlay, который изначально будет спрятан. Итак, мы будем использовать неупорядоченный список, где каждый элемент списка будет содержать миниатюру и блок с соответствующим большим изображением:
Теперь рассмотрим стили CSS. Мы буем опускать префиксы различных браузеров для некоторых новых свойств, чтобы не перегружать статью. Но их можно, конечно, найти в исходных файлах. Ниже представлены стили нашего основного слоя, неупорядоченного списка и миниатюр:
Название каждой миниатюры будут невидимым и мы будем добавлять переход для непрозрачности, которая станет равной 1, когда мы наведем курсор мыши на якорь миниатюры. Мы будем использовать гладкий радиальный градиент в качестве фона:
Слоя наложения будет иметь такой же радиальный градиент, также мы установим свойство position равное fixed, с нулевой высотой и шириной:
Как только мы нажмем на миниатюру, мы раскроем на весь экран этот блок поверх остальных, но сначала давайте посмотрим на дочерние элементы. Давайте зададим стили для основного названия и описания:
Разместим ссылку для закрытия lightbox-a чуть выше картинки:
Теперь давайте зададим стили для элементов навигации:
Когда мы нажимаем на якорь миниатюры, он будет указывать на соответствующее большое изображение, которое находится в блоке с классом lb-overlay. Таким образом, с целью нахождения этого элемента мы можем использовать псевдо-класс :target.
Теперь мы установим прозрачность для изображения и ссылки закрытия равную 1:
Теперь рассмотрим анимацию. В первом примере мы сделали так, что изображение появляется с помощью анимации, изменяя его масштаб и увеличивает его значение непрозрачности:
Во втором примере мы создали обратный эффект, то есть масштаб изображения уменьшается:
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Создайте адаптивную галерею лайтбоксов с изображениями и видео.
Новый компонент Lightbox — комплексная функция для быстрого создания галерей изображений и видео. Посетители могут прокручивать изображения, используя сенсорную и проводную навигацию, а на не сенсорных устройствах они могут применять обычное перетаскивание мышью. Кроме того, клавиатура так же может применяться. Благодаря аппаратно ускоренным переходам CSS3, вы можете выбрать один из трех основных эффектов для создания плавной анимации при переходе по галерее Lightbox: Slide, Fade и Scale.
Компонент лайтбокса полностью совместимм с событиями сенсорных экранов и пролистываемой навигацией, а также перетаскиванием мышью для рабочих столов. При пролистывании между слайдами анимация буквально застревает на кончике пальца или курсора мыши. Быстро нажимая на предыдущую и следующую навигацию, анимация будет ускоряться, чтобы не отставать от вашего темпа. Все анимации имеют аппаратное ускорение для более плавной работы.
Как использовать Компонент Lightbox в UIkit 3
Для начала работы с компонентом добавьте атрибут uk-lightbox к контейнеру, чтобы превратить все якоря внутри этого контейнера в ссылки лайтбокса.
Атрибут Alt
Чтобы добавить атрибут alt к изображению в лайтбоксе, установите атрибут data-alt .
Описания
Чтобы отобразить заголовок внизу лайтбокса, установите атрибут data-caption с названием заголовка .
Анимации
По умолчанию галерея Lightbox использует анимацию слайдов. Вы можете задать опцию animation для использования анимации. Возможные значения slide , fade и scale .
Читайте также: