Описание jQuery Lightbox

Опубликовано: 1 января 1970 г.
  • графика
  • jquery
  • Скачать
Lightbox - это JQuery-плагин, который используется для отображения изображения или любого другого контента в специально оформленном окне, которое показывается, как правило, на полупрозрачном затененном фоне поверх основного контента страницы.

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

В ночи, Campbell и Maguire Funérailles
В ночи, Campbell и Maguire Funérailles Наряды для Ференца Листа, дизайнер костюмов Сара Бертон Tiler Peck в костюме для Funérailles

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

Скачайте последнюю версию плагина (также доступна через Bower: bower install lightbox2 --save). После этого разархивируйте zip файл и загляните в урезанный рабочий пример, который находится в папке examples.

Готовые для установки Lightbox на вашей странице? Начните с подключения CSS и Javascript. Вы можете взять оба этих файла из папки dist. Вставьте следующий код между тегами head в вашей web-странице

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

Следующий код, подключающий плагин, вставьте перед закрывающим тегом body:

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

Убедитесь, что JQuery, который требуется Lightbox, также загружаются. Если вы уже используете JQuery (требуется JQuery 1.7 или выше) на странице, убедитесь, что он загружается до lightbox.js. Если у вас не подключена jQuery, воспользуйтель dist/js/lightbox-plus-jquery.js, в котором уже есть эта библиотека, либо скачайте последнюю версию с оф. сайта. Убедитесь, что четыре изображения, прописанные в lightbox.css расположени в указанном месте. Вы можете взять изображения из папки /dist/images.

Теперь займемся HTML-кодом. Добавьте атрибут data-lightbox к ссылке, содержащей изображения и к которым мы хотим применить наш плагин. В качествен значения атрибута используйте уникальное для каждого изображения имя. Например:

<a href="images/image-1.jpg" 
   data-lightbox="image-1" 
   data-title="Мой заголовок">Image #1</a>

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

<a href="img2.jpg" data-lightbox="roadtr">Img 2</a>

<a href="img3.jpg" data-lightbox="roadtr">Img 3</a>

<a href="img4.jpg" data-lightbox="roadtr">Img 4</a>

Настройки Lightbox

Если вы хотите изменить какие-либо параметры по умолчанию, вызовите метод option:.

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>
  • alwaysShowNavOnTouchDevices
    По умолчанию:
    false

    Если true, то левая и правая стрелки навигации, которые появляются при наведении мыши при просмотре набора изображений, будут всегода видимы на устройствах с поддержкой сенсорного ввода

  • fadeDuration
    По умолчанию:
    500

    Время, необходимое для исчезновения контейнера, в миллисекундах.

  • fitImagesInViewport
    По умолчанию:
    true

    Если true, то пропорционально уменьшаем размер изображения чтобы картинка поместилось в области просмотра. Это избавляет пользователя от необходимости скроллить, чтобы увидеть все изображение.

  • maxWidth

    Если задано, высота изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.

  • maxHeight

    Если задано, ширина изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.

  • positionFromTop
    По умолчанию:
    50

    Расстояние от верхней части окна просмотра до Lightbox-контейнера (в пикселях).

  • resizeDuration
    По умолчанию:
    700

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

  • showImageNumberLabel
    По умолчанию:
    true

    Если false, в текст будет указываться текущий номер изображения и общее количество изображений в наборе, например: "Изображение 2 из 4".

  • wrapAround
    По умолчанию:
    false

    Если true, то при показе последнего изображения кнопка для показа следующего изображения не исчезает. Нажатие на нее приведет к показу первого изображения.

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
SPAbootstrapjavascriptjqueryанимацияверсткагалереяграфикакарусельподсказкискроллингсчетчикформыэлементы интерфейса
© 2009-2017 WebSketches.ru