Jquery lightbox

Lightbox - це JQuery-плагін, який використовується для відображення зображення або будь-якого іншого контенту в спеціально оформленому вікні, яке показується, як правило, на напівпрозорому затіненому тлі поверх основного контенту сторінки.

Перш ніж встановлювати плагін на сторінку і займатися його налаштуванням, давайте поглянемо на приклади:

Початок роботи з Lightbox

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

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

Переконайтеся, що JQuery, який потрібно Lightbox, також завантажуються. Якщо ви вже використовуєте JQuery (потрібно JQuery 1.7 або вище) на сторінці, переконайтеся, що він завантажується до lightbox.js. Якщо у вас не підключена jQuery, воспользуйтель dist / js / lightbox-plus-jquery.js. в якому вже є ця бібліотека, або скачайте останню версію з оф. сайту. Переконайтеся, що чотири зображення, прописані в lightbox.css расположени в зазначеному місці. Ви можете взяти зображення з папки / dist / images.

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

Додайте атрибут data-title. якщо ви хочете показати заголовок. Якщо у вас є група пов'язаних зображень, які ви хотіли б об'єднати в набір, використовуйте однакове значення в атрибуті data-lightbox для необхідних зображень. наприклад:

налаштування Lightbox

Якщо ви хочете змінити будь-які параметри за замовчуванням, викличте метод option.

alwaysShowNavOnTouchDevices За замовчуванням: false

fadeDuration За замовчуванням: 500

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

fitImagesInViewport За замовчуванням: true

Якщо задано, висота зображення буде обмежена цим значенням (в пікселях). Співвідношення сторін не буде дотримуватися.

Якщо задано, ширина зображення буде обмежена цим значенням (в пікселях). Співвідношення сторін не буде дотримуватися.

positionFromTop За замовчуванням: 50

resizeDuration За замовчуванням: 700

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

showImageNumberLabel За замовчуванням: true

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

wrapAround За замовчуванням: false

Якщо true. то при показі останнього зображення кнопка для показу наступного зображення не зникає. Натискання на неї приведе до показу першого зображення.