Галерея jquery lightbox

нестандартне оформлення

Як налаштовувати плагін за допомогою параметрів ініціалізації, думаю тепер зрозуміло. Давай торкнемося трохи складніших налаштувань.

міняємо картинки

Отже, шляхи до нових картинок задані за допомогою imageLoading, imageBtnClose, imageBtnPrev і imageBtnNext. Але що, якщо самі картинки відрізняються за розміром? Не проблема. Редагуємо jquery.lightbox-0.5.css:

Що стосується кнопок «наступна», «попередня», то в більшості випадків змінювати стилі не потрібно. Так як сама кнопка істотно більше своєї фонової картинки і займає майже половину фотографії. Це досить зручно - не потрібно клацати саме по напису. Досить клацнути, наприклад, «кудись зліва» і отримаємо перехід на попередню фоту. Якщо все-таки потрібно змінити клікабільную область - редагуємо правила для # lightbox-nav-btnPrev і # lightbox-nav-btnNext.

Підписи під картинками

При бажанні, можна задати індивідуальні підписи кожної збільшеної зображенні. У цьому питанні плагін теж виявився на висоті. Підписи задаються дуже простим і логічним способом - атрибутом title для тега a:

Фон для великого фото

Параметр overlayBgColor задає колір фону для заливки сторінки. А якщо потрібно поміняти фон у великого фото, знову доведеться правити стилі.

Прибираємо непотрібні елементи

А якщо мені потрібно тільки збільшене фото взагалі без панельки з підписами? Немає проблем! Йдемо в стилі і додаємо display: none:

Трохи важче прибрати тільки напис «Зображення X з N». Її правило має селектор # lightbox-image-details-currentNumber. Просто display: none; тут не прокотить, тому що скрипт переставити його на display: block. Нічого страшного! Просто перебиваємо його за допомогою! Important:

Демо-приклад - та ж галерея, але з більш тонким налаштуванням.

Сюрприз від IE6 (в quirks mode)

Як завжди ложка дьогтю від старого осла. В IE6 в режимі зворотної сумісності помічений баг - панель з текстом кілька вже, ніж панель з малюнком.

На жаль, стилями це поправити вийде - за ширину відповідає скрипт. Відповідно, якщо потрібно позбавлятися від бага (а це потрібно не завжди - у багатьох сайтах панель з текстом в таких галереях просто приховують), то і правити потрібно скрипти. Один з варіантів, знайти в тексті плагіна рядок:

... і перед нею вставити насильницьке збільшення ширини для осла. Щось типу такого:

Само-собою таке втручання вже не дозволить використовувати запаковану версію плагіна (або змусить перепакувати).

• адекватно працює у всіх популярних браузерах;
• не вимагає створення нелогічних HTML конструкцій, додаткових класів або атрибутів;
• проста в налаштуванні і прив'язці.

матеріали: