Галерея jquery lightbox 0.5
Добрый день всем читателям моего блога. Сегодня я хочу рассказать как создать быстро и просто красивую галерею, используя мой любимый фрэймворк jquery и библиотеку jquery.lightbox.
Вот небольшой пример этой библиотеки:
Что нам для этого потребуется:
- Непосредственно сам фрэймворк jquery
- библиотека lightbox
Всё это можно скачать с официальных сайтов разработчиков данных продуктов или всё в зборе тут
Библиотека работает просто до неприличия 
вот пример использования:
Сначала как всегда подключаем наш любимый фрэймворк и саму библиотеку, а так же слили по желанию:
1 2 3 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> |
дальше в head вставляем код следующего содаржания:
1 2 3 | $(function() { $('#gallery a').lightBox({fixedNavigation:true}); }); |
В случае если у вас несколько плагинов то вы можете подключить скрипт следующими способами:
1 2 3 4 5 6 7 | $(function() { // Используйте этот пример, или ... $('a[@rel*=lightbox]').lightBox(); // Выбрать все ссылки, которые содержатся lightBox в атрибуте rel // Это, или ... $('#gallery a').lightBox(); // Выбрать все ссылки на объект с галереей ID // Это, или ... $('a.lightbox').lightBox(); |
Есть ещё много других вариантов, это зависит уже от вашей фантазии.
Кроме того вы можете несколько кастомизировать саму всплывающую форму. Вот небольшой пример
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $.Lightbox.construct({ "speed": 700, "show_linkback": true, "keys": { close: "q", prev: "z", next: "x" }, "opacity": 0.7, "rel": box-tour, text: { image: "Картинка", of: "из", close: "Закрыть", closeInfo: "Клик вне картинки завершит просмотр.", help: { close: "Закрыть", interact: "Интерактивная подсказка" }, about: { text: "Можно вставить какую-нибудь ссылку", title: "И снабдить |
Нет комментариев на "Галерея jquery lightbox 0.5"
Нет комментариев.
Вы можете продолжить обсуждение этой статьи на форуме