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

Вы не залогинились
13:37

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

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

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

Начало работы

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

Код

<link href="path/to/lightbox.css" rel="stylesheet">


В самом низу кода страницы нужно подключить библиотеку jQuery не ниже версии 1.7 и файл вызова лайтбокса:

Код

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="path/to/lightbox.js"></script>


Если вы не хотите использовать два файла, можете вместо них подключить один, в котором совмещены скрипты лайтбокса и jQuery:

Код

<script src="path/to/lightbox-plus-jquery.js"></script>


Не забудьте в файле lightbox.css проверить корректность путей до файлов с изображениями:

Код

body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
}


Теперь всё готово к работе.

Лайтбокс для одиночного изображения

Демо

Для того, чтобы одиночное изображение открылось в окне лайтбокса, в качестве ссылки, по клику на которую откроется лайтбокс, можно использовать, собственно, саму ссылку, либо уменьшенное изображение основного. Добавьте атрибут data-lightbox для любой ссылки на изображение, чтобы для него выводился лайтбокс. Значение атрибута для каждого отдельного изображения должно быть уникальным (в отличие от варианта для группы изображений, выводимых в одном окне лайтбокса).

Код

<a class="example-image-link" href="Здесь адрес изображения" data-lightbox="example-1" data-title="Здесь подпись к изображению">Ссылка</a>

<a class="example-image-link" href="Здесь адрес изображения" data-lightbox="example-1" data-title="Здесь подпись к изображению"><img class="example-image" src="Здесь адрес к уменьшенному изображению" alt="image-1" /></a>


Лайтбокс для группы изображений

Демо

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

Код

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>


ну или так

Код

<a class="example-image-link" href="Здесь адрес 1-го изображения" data-lightbox="olala" data-title="Здесь подпись к 1-му изображению"><img class="example-image" src="Здесь адрес к уменьшенному 1-му изображению" alt="image-1" /></a>
<a class="example-image-link" href="Здесь адрес 2-го изображения" data-lightbox="olala" data-title="Здесь подпись к 2-му изображению"><img class="example-image" src="Здесь адрес к уменьшенному 2-му изображению" alt="image-2" /></a>
<a class="example-image-link" href="Здесь адрес 3-го изображения" data-lightbox="olala" data-title="Здесь подпись к 3-му изображению"><img class="example-image" src="Здесь адрес к уменьшенному 3-му изображению" alt="image-3" /></a>


Навигация доступна как классическими стрелками "Вперёд-назад", так и аналогичными клавишами на клавиатуре. Если вы хотите изменить какие-то из параметров лайтбокса, выставленных по-умолчанию, выберите метод option, например:

Код

<script>
  lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
  })
</script>


Настройки лайтбокса

alwaysShowNavOnTouchDevices (по умолчанию false) - если выставить значение true, левая и правая навигационные стрелки, которые появляются при наведении курсора мыши при просмотре наборов изображений всегда будут отображаться на устройствах, поддерживающих контакт (например, планшеты итд)

albumLabel (по умолчанию "Image %1 of %2") - текст, отображаемый под подписью к изображению при просмотре набора изображений. По умолчанию, отображается номер текущего изображения и общее количество изображений в наборе.

disableScrolling (по умолчанию false) - если выставить значение true, то в то время, как лайтбокс будет открыт, страница не будет прокручиваться.

fadeDuration (по умолчанию 600) - время в миллисекундах для открытия, скрытия окна лайтбокса и слоя наложения.

fitImagesInViewport (по умолчанию true) - если стоит значение true, то изображения, размер которых превышает область окна просмотра лайтбокса, автоматически подстраиваются под размеры окна лайтбокса, что позволяет пользователю видеть изображение целиком, не используя прокрутку экрана.

imageFadeDuration (по умолчанию 600) - время, в миллисекундах, необходимое для исчезновения изображения после загрузки

maxWidth - если будет установлено какое-то значение, в пикселях, то ширина изображений будет ограничиваться этим значением

maxHeight - если будет установлено какое-то значение, в пикселях, то высота изображений будет ограничиваться этим значением

positionFromTop (по умолчанию 50) - расстояние всплывающего лайтбокса от верхней части окна просмотра в пикселях

resizeDuration (по умолчанию 700) - время, в миллисекундах, необходимое контейнеру лайтбокса, чтобы изменить свои размеры ширины и высоты при переходе между изображениями набора, имеющими разные размеры.

showImageNumberLabel (по умолчанию true) - если выставить значение false, то не будет выводиться под изображениями в наборе номер текущего изображения и их общее количество.

wrapAround (по умолчанию false) - если выставить параметр true, то при достижении пользователя последнего изображения в наборе, стрелка навигации не исчезнет, а при клике на ней происходит переход к первому изображению набора (цикличная прокрутка).

Совместимость с браузерами

Данный лайтбокс был успешно протестирован в следующих браузерах:

- Chrome
- Safari
- Firefox
- iOS Safari
- iOS Chrome
- Android Browser
- Android Chrome
- Internet Explorer : lightbox-plus-jquery.js включает в себя jQuery v2.x и поддерживается IE 9+. Если вам нужна поддержка IE 6, 7 и 8, используйте подключение отдельно библиотеки jQuery не ниже версии 1.7 и файла lightbox.js.

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

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

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

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

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

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

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

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

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

11.12.2017

Понедельник

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

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