Гостевой вход

Вы не залогинились
21:46

Lightcase.js - респонсивный Lightbox на основе jQuery и SASS

Категория: Диалоги,overlay и lightbox

Метки: адаптивная фотогалерея, фотогалерея, слайдер изображений, Sass, слайдер контента
Lightcase.js представляет собой мощный и гибкий плагин Lightbox для настольных компьютеров и мобильных устройств.
Он использует CSS3 переходы, работает со сторонними ресурсами, поддерживает различные типы устройств, а также все современные браузеры, такие как Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+ и многие другие

Основные настройки

Шаг 1 : Lightcase базируется на библиотеке jQuery, поэтому, первым делом, вам нужно подключить саму библиотеку:

Код

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


Шаг 2 : Теперь, подключите файлы CSS и JavaScript для оформления и работы Lightcase:

Код

<link rel="stylesheet" type="text/css" href="path/to/lightcase.css">
<script type="text/javascript" src="path/to/lightcase.js"></script>


Шаг 3 : теперь, когда вы подключили все необходимые файлы, вам нужно определить, какие ссылки будут открывать Lightcase. В данном случае мы используем селектор для выбора всех ссылок, которые имеют атрибут "data-rel" со значением "lightcase".

Код

<script type="text/javascript">
  jQuery(document).ready(function($) {
  $('a[data-rel^=lightcase]').lightcase();
  });
</script>


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

Шаг 4 : чтобы открыть ваши медиафайлы с помощью Lightcase, создайте ссылки и присвойте им атрибуты со значением data-rel="lightcase". Например, для открытия изображения:

Код

<a href="path/to/media.jpg" data-rel="lightcase">Ваше описание ссылки</a>


Показ заголовков

В случае, если вы хотите добавить заголовок, просто добавьте к вашей ссылке тег title с описанием (с содержимым заголовка):

Код

<a href="path/to/media.jpg" data-rel="lightcase" title="Ваш заголовок">Ваше описание ссылки</a>


Внутри CSS-файла lightcase.css есть ссылки на подключаемые файлы шрифта, поэтому создайте на сайте папку fonts и залейте в неё файлы шрифтов.

Код

@font-face {
  font-family: 'lightcase';
  src: url("../fonts/lightcase.eot?55356177");
  src: url("../fonts/lightcase.eot?55356177#iefix") format("embedded-opentype"), url("../fonts/lightcase.woff?55356177") format("woff"), url("../fonts/lightcase.ttf?55356177") format("truetype"), url("../fonts/lightcase.svg?55356177#lightcase") format("svg");
  font-weight: normal;
  font-style: normal;
}


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

Демо

Мы работали с одиночным элементом, а теперь давайте объединим несколько элементов, чтобы получить настоящий слайдер с навигацией, где можно пролистывать элементы вперёд-назад. Для этого нужно лишь всем элементам присвоить атрибут "data-rel" со значением "lightcase:myCollection". Например:

Код

<a href="path/to/1.jpg" data-rel="lightcase:myCollection" title="Это первое изображение">Элемент 1</a>
<a href="path/to/2.jpg" data-rel="lightcase:myCollection" title="Это второе изображение">Элемент 2</a>
<a href="path/to/3.jpg" data-rel="lightcase:myCollection" title="Это третье изображение">Элемент 3</a>


Теперь посмотрите что получилось. У нас получился самый настоящий слайдер! Еще и адаптивный.

Демо

Несколько объединённых таким образом элементов мы будем условно называть коллекцией.Так вот, внутри коллекции можно создавать категории. Lightcase, в данном случае, работает как фильтр: ищет материалы соответствующих категорий и выводит их по отдельности друг от друга, в зависимости от того, какая была нажата ссылка, вызывающая Lightcase.
Категории разделяются с помощью пробелов.

Я сделал простенькую демо-страницу, чтобы продемонстрировать как это работает. Есть девять фотографий, по три из каждой категории: "Растения", "Животные" и "Человек". При клике на какой то фотографии, откроется лайтбокс, в котором можно пролистать другие фото из категории, к которой принадлежит эта фотография.

Демо

Категория элементу присваивается следующим образом:

Код

<a href="path/to/image1.jpg" data-rel="lightcase:myCollection" data-lc-categories="myCategory1 myCategory2"">Ссылка</a>
<a href="path/to/image2.jpg" data-rel="lightcase:myCollection" data-lc-categories="myCategory1"">Ссылка</a>
<a href="path/to/image3.jpg" data-rel="lightcase:myCollection" data-lc-categories="myCategory2 myCategory3 myCategory4"">Ссылка</a>


Если вы хотите, чтобы в лайтбоксе элементы коллекции менялись автоматически (слайдшоу), то просто добавьте :slideshow в атрибут 'data-rel' элемента, например, есть три изображения, являющиеся ссылками:

Код

<a href="path/to/image1.jpg" data-rel="lightcase:myCollection:slideshow" title="Описание изображения"><img src="path/to/image1.jpg" border="0" alt="" /></a>
<a href="path/to/image2.jpg" data-rel="lightcase:myCollection:slideshow" title="Описание изображения"><img src="path/to/image2.jpg" border="0" alt="" /></a>
<a href="path/to/image3.jpg" data-rel="lightcase:myCollection:slideshow" title="Описание изображения"><img src="path/to/image3.jpg" border="0" alt="" /></a>


Демо

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

Код

<script type="text/javascript">
  jQuery(document).ready(function($) {
  $('a[data-rel^=lightcase]').lightcase({
  transition: 'scrollHorizontal',
  showSequenceInfo: false,
  showTitle: false
});
  });
</script>


Посмотрите как теперь меняются изображения в слайдшоу.

Демо

Возможные варианты эффектов для смены элементов в слайдшоу таковы (подставляем в эту строку скрипта transition: 'scrollHorizontal'):

'none',
'fade',
'fadeInline',
'elastic',
'scrollTop',
'scrollRight',
'scrollBottom',
'scrollLeft',
'scrollHorizontal'
'scrollVertical'.

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

Просмотров: 454 | Скачиваний: 9 | Комментариев: 0 | Рейтинг: 5.0/Оценок: 1

Материалы схожей тематики

    Дополнительная информация во всплывающих подсказках на CSS

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

    Оригинальный Lightbox от Lokesh Dhakar

    Классический лайтбокс от Lokesh Dhakar, рассмотрим два варианта: лайтбокс для одиночных изображений и лайтбокс для группы изображений с элементами навигации.

    Responsive jQuery Content Slider - полностью адаптивный слайдер с массой возможностей

    Почему я должен пользоваться именно этим слайдером? - Полностью респонсивный - будет подстраиваться под любое устройство - Горизонтальная, вертикальная прокрутка слайдов, затухание - Слайды могут содержать изображение, видео, HTML-контент - Поддержка сенсорного управления, встроенный swipe-суппорт - Использует CSS-переходы для слайд-анимации (родное аппаратное ускорение!) - Полный обратный вызов API и публичные методы - Небольшой размер файла, полностью опирающийся на определённую тему, прост в реализации - Поддержка браузеров: Firefox, Chrome, Safari, IOS, Android, IE7 + - Тонны конфигурационных опций

    ResponsiveSlides.js - простой и легкий плагин респонсивного слайдера

    ResponsiveSlides.js - крошечный плагин jQuery, позволяющий создать респонсивный слайдер с помощью элементов внутри контейнера. Используется на таких сайтах, как Microsoft's Build 2012 и Gridset App. Работает в широком диапазоне браузеров, включая все версии IE от IE6 и выше. Зависим лишь от jQuery (поддерживается версия от 1.6 и выше) и особенностью является одинаковый размер всех изображений.

    SlidesJS - многофункциональный слайдер для изображений

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

    Адаптивная галерея изображений на jQuery

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

    jFlow Plus - компактный слайдер на jQuery

    Неплохой слайдер изображений на jQuery, имеется функция слайд-шоу (по умолчанию включена), навигация доступна как стрелками вправо-влево, так и якорями-ссылками на каждый отдельный слайд. Для слайдов предусмотрен вывод подписей на полупрозрачном фоне с описанием к изображению. Вобщем, добротный, хороший слайдер, но - не адаптивный вариант.

    Адаптивный слайдер изображений на jQuery и CSS3

    Очень стильный слайдер, всё гениальное просто! Ничего лишнего - навигация стрелками (довольно стильно оформленная кстати) продублирована маркерами. Есть возможность добавления подписей к изображениям. По умолчанию включено слайд-шоу, автоматическая прокрутка изображений.

    Ninja Slider: респонсивный слайдер (слайд-шоу) изображений

    Отличный вариант слайдера с богатыми возможностями: здесь и слайд-шоу для слайдов, и расширение (увеличение) области слайдера по клику, возможность использования в слайдере контента, видео, аудио, поддержка галереи с превьюшками изображений, галереи с слайдером в окне лайтбокса , адаптивность, вобщем всё круто!

    Полноэкранный слайдер изображений на чистом CSS

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

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: