jQuery lightBox plugin

jQuery lightBox плагин использует JavaScript библиотеку jQuery , поэтому в начале необходимо подключить эту библиотеку и lightBox плагин к странице:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

Затем добавьте CSS-файл отвечающий за внешний вид lightBox плагина:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Вам не нужно изменять HTML-разметку чтобы использовать jQuery lightBox плагин. Просто используйте мощь и гибкость jQuery и создайте набор связанных изображений.
Нужно только иметь HTML-разметку наподобии этой:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

После этого выберите ссылки, вызвав jQuery Lightbox плагин. Например:

<script type="text/javascript">
$(function() {
    // Используйте это пример, если...
    $('a[@rel*=lightbox]').lightBox(); // выбираете все ссылки которые содержат слово lightbox в аттрибуте rel
    // или.
    $('#gallery a').lightBox(); // выбираете все ссылки в контейнере с id#gallery
    // Используйте это пример, если...
    $('a.lightbox').lightBox(); // выбираете все ссылки с классом lightbox
    // Используйте это пример, если...
    $('a').lightBox(); // выбираете все ссылки на странице
    // ... Возможностей можество. Вы можете написать свой вариант или выбрать из представленных выше.
});
</script>

jQuery lightBox plugin имеет также множество настроек, с помощью которых Вы можете настроить плагин в соответствии с Вашими пожеланями.

Доступны следующие настройки:

• overlayBgColor - используется для определения цвета фона. #000 (черный) по-умолчанию.
• overlayOpacity - используется для определения степени прозрачности. 0.8 по-умолчанию.
• imageLoading - gif-анимация при загрузке картинки. images/lightbox-ico-loading.gif по-умолчанию.
• imageBtnClose - кнопка "закрыть". images/lightbox-btn-close.gif по-умолчанию.
• imageBtnPrev - кнопка "предыдущая". images/lightbox-btn-prev.gif по-умолчанию.
• imageBtnNext - кнопка "следующая". images/lightbox-btn-next.gif по-умолчанию.
• containerBorderSize - задает padding для контейнера содержащего картинку. 10 по-умолчанию.
• containerResizeSpeed - эфеект изменения размера контейнера с картинкой. 400 по-умолчанию.
• txtImage - Tекст "Image" - используется для определения заголовка картинки.
• txtOf - Текст "of" используется в заголовке картинки.
• keyToClose - "горячая" клавиша для закрытия lightBox. Буква c (close) по-умолчанию.
• keyToPrev - "горячая" клавиша для перехода к предыдущей картинке. Буква p (previous) по-умолчанию.
• keyToNext - "горячая" клавиша для перехода к следующей картинке. Буква n (next) по-умолчанию.

Например:

<script type="text/javascript">
$(function() {
    $('a[@rel*=lightbox]').lightBox({
    overlayBgColor: '#fff',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
    });
});
</script>