Lightbox - установка, настройка примеры и документация

Lightbox - установка, настройка примеры и документация

Lightbox - установка, настройка примеры и документация

Lightbox2 - это небольшая библиотека javascript, используемая для наложения изображений поверх текущей страницы. Его легко настроить и он работает во всех современных браузерах.

Разработчиком данной библиотеки является Lokesh Dhakar ( https://lokeshdhakar.com/projects/lightbox2/ ). Данный плагин позволяет создать удобный просмотр изображений в модальном окне на странице сайта. LightBox2 поможет оживить ваш графический контент на сайте.

LightBox2 позволяет организовать просмотр графических элементов на странице путем увеличения миниатюры в модальном окне. Существуют два варианта использования:

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

Второй это группа изображений при нажатии на любую из них можно организовать галерею изображений.

Поддержка браузера

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

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

Установка LightBox2

Для установки LightBox2 вы можете загрузить zip-архив с последней версией (или любой предыдущей) со страницы Github Releases. ( https://github.com/lokesh/lightbox2/releases ).

Или установите с помощью npm:

npm install lightbox2 --save

В скаченном архиве нас интересует каталог dist в нем находятся все нужные файлы для подключения. Первым делом нужно подключить CSS между тегами <head> :

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

Подключите плагин LightBox2 внизу страницы перед закрывающим тегом </body> :

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

Убедитесь, что jQuery, который требуется для Lightbox , также подключен на вашей странице и lightbox.js находится после библиотеки jQuery. Для корректной работы плагина требуется jQuery не ниже версии 1.7 или выше.

Инициализировать с помощью HTML

Для быстроты использования плагина с настройками по умолчанию можно воспользоваться data атрибутами: Одиночные изображения. Добавьте data-lightbox атрибут к любой ссылке на изображение, чтобы включить Lightbox . В качестве значения атрибута используйте уникальное имя для каждого изображения.

Например:

  
    <a href="images/image-1.jpg" data-lightbox="image-1" data-title="Солнечное затмение">Image #1</a>
  

Изображение Изображение

Необязательные атрибуты:

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

Например:

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

Изображение группы Изображение группы Изображение группы Изображение группы

Опции:

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

  
    <script>
    lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true
    });
    </script>
  
Набор опций
Опции Значение по умолчанию Описание
alwaysShowNavOnTouchDevices false Если задано значение true , стрелки навигации влево и вправо, которые появляются при наведении курсора мыши при просмотре наборов изображений, всегда будут видны на устройствах, поддерживающих сенсорный ввод.
albumLabel "Image %1 of %2" Текст, отображаемый под заголовком при просмотре набора изображений. Текст по умолчанию показывает текущий номер изображения и общее количество изображений в наборе.
disableScrolling false Если true , запретить прокрутку страницы при открытом лайтбоксе. Это работает путем переполнения настроек, overflow hidden на body.
fadeDuration 600 Время, необходимое контейнеру Lightbox для постепенного появления и исчезновения, в миллисекундах.
fitImagesInViewport true Если true , измените размер изображений, которые будут выходить за пределы окна просмотра, чтобы они аккуратно помещались внутри него. Это избавляет пользователя от необходимости прокручивать изображение, чтобы увидеть его целиком.
imageFadeDuration 600 Время, необходимое для появления изображения после загрузки, в миллисекундах.
maxWidth   Если установлена ширина изображения то будет ограничена этим числом в пикселях. Соотношение сторон не будет сохранено.
maxHeight   Если установлена высота изображения то будет ограничена этим числом в пикселях. Соотношение сторон не будет сохранено.
positionFromTop 50 Расстояние от верхней части окна просмотра, на котором будет отображаться контейнер Lightbox, в пикселях.
resizeDuration 700 Время, которое требуется контейнеру Lightbox для анимации ширины и высоты при переходе между изображениями разного размера, в миллисекундах.
showImageNumberLabel true Если false , текст, указывающий номер текущего изображения и общее количество изображений в наборе (например, «изображение 2 из 4»), будет скрыт.
wrapAround false Если true , когда пользователь дойдет до последнего изображения в наборе, появится правая стрелка навигации, и он будет продолжать движение вперед, что вернет его к первому изображению в наборе.

Теги
Поддержи проект:


Copyright © 2014 - 2022 All rights reserved.