Jquery lightbox - відмінна фотогалерея, jquery

Відкрийте приклад в окремому вікні і подивіться вихідний код.

Отже, що ж потрібно, щоб використовувати таку галерею на своєму сайті?

Нам знадобиться бібліотека jQuery, звичайно ж сам плагін jquery.lightbox.js. файл стильового оформлення, кілька картинок (вперед, назад, завантаження ...) і фотографії для Вашої галереї, представлені в двох варіантах: мініатюра і повнорозмірне зображення.

Потрібні файли (включаючи демонстраційні фото), Ви зможете знайти в цьому архіві. Сам плагін jquery.lightbox.js і бібліотеку jQuery можна знайти в розділі Download.

Для початку підключимо в розділі HEAD нашої HTML-сторінки потрібні файли, звичайно ж дотримуючись шляху до них (у Вас вони можуть відрізнятися):

Потім займемося розміщенням в тілі HTML-сторінки мініатюр. Тут простір для творчості - розміщуйте як, де і скільки хочете мініатюр. Ось наприклад:

Це найпростіший і легкий спосіб використання плагіна jQuery LightBox. Є і ще один, більш гнучкий спосіб. Подивіться код, наведений нижче. В jQuery-селекторі ми відбираємо всі елементи А, які нас цікавлять. Але перевага цього способу навіть не в цьому, а в тому, що тут можна використовувати деякі опції, які ми розберемо нижче ...

Я привів не всі опції - інші Ви зможете знайти, якщо відкриєте файл jquery.lightbox.js і знайдете рядки 455 - 520.

Що ще можна накоїти з jQuery LightBox, щоб Ваш екземпляр трохи відрізнявся від своїх побратимів? Мабуть трохи поколупати стильове оформлення в файлі lightbox.css. Ну наприклад, щоб змінити колір фону з встановленого за замовчуванням чорного на який-небудь зелений, знайдіть # lightbox-overlay і поміняйте background-color: # 0000; на background-color: # 00ff00; і так далі…