В этой статей я постараюсь описать как можно “прикрутить“ к сайту LightBox v 2.0
Для начало я расскажу, что же такое LightBox и для чего он нужен. Lightbox – простой JS скрипт, отображающий изображения на текущей странице,
на страницу можно поместить уменьшенное изображение, нажав на него открывается красивое окошко, где это изображение будет показано в оригинальном размере,
самое главное это окошко открывается без перезагрузки страницы и работает почти во всех современных браузерах. Взять скрипт и посмотреть демо версию можно .
Теперь разберем какже это чудо встроить в нашу html страничку.
Установка LightBox:
1. Lightbox использует JavaScript библиотеки Prototype Framework и Scriptaculous, нам нужно будет подключить в нашу страничку три файла, для этого вставьте
следующий код в вашу страничку между тэгами <head> и </head>
2. Дальше нам нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте в вашу страничку следующий код, между тэгами <head> и </head>
3. Потом проверьте в файле CSS ссылки на prev.gif next.gif. Также убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.
Использование LightBox:
1. Добавляем такую ссылку после тэга<body>, этим кодом мы сделали LightBox для картинки image-1.jpg, таким образом можно подключить и другие картинки. Атрибут title служит
для подписи картинки, его можно и не использовать.
2. Если у вас есть группа превьюшек, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут rel - имя группы в квадратных скобках. Пример:
LIci WP - WordPress crossposting plugin
