Использование плагина LightBox jQuery

27 января 2009 Автор: Zver Прокомментировать

Для создания галереи LightBox на своём сайте, необходимо скачать библиотеку скриптов jQuery, ну и конечно же сам плагин LightBox.
Все необходимые файлы Вы можете скачать в конце этого поста.

Все скрипты рекомендую положить в отдельную папку, например site-template/js, а файл стилей соответственно в site-template/css.
После того, как Вы положили все необходимые скрипты, а также файл стилей, в папку Вашего шаблона, необходимо прикрутить их к самому шаблону. Для этого между тегами <head></head> вставьте:

<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.4.css">

Здесь же, ниже, необходимо вставить:

<script type="text/javascript">
    $(function() {
        $('a[@rel*=lightbox]').lightBox();
        $('a.lightbox').lightBox();
    });
</script>

Теперь ко всем ссылкам на странице, с атрибутом rel="lightbox", либо с именем класса class="lightBox" будет прикручен плагин LightBox. Пример ссылки:

<a href="image.jpg"><img src="image-small.jpg" alt="" /></a>

image.jpg - это сама картинка, а image-small.jpg - это уменьшеная копия картинки.

Да, кстати, плагин LightBox ещё имеет ряд настроек:
overlayBgColor - используется для определения цвета фона.
overlayOpacity - используется для определения степени прозрачности.
imageLoading - gif-анимация при загрузке картинки.
imageBtnClose - кнопка "закрыть".
imageBtnPrev - кнопка "предыдущая".
imageBtnNext - кнопка "следующая".
containerBorderSize - задает padding для контейнера содержащего картинку.
containerResizeSpeed - эфеект изменения размера контейнера с картинкой.
txtImage - Tекст "Image" - используется для определения заголовка картинки.
txtOf - Текст "of" используется в заголовке картинки.
keyToClose - "горячая" клавиша для закрытия lightBox.
keyToPrev - "горячая" клавиша для перехода к предыдущей картинке.
keyToNext - "горячая" клавиша для перехода к следующей картинке.

То есть, к примеру, если нам нужно сменить цвет фона и скорость вылета картинки, то к:

<script type="text/javascript">
    $(function() {
        $('a[@rel*=lightbox]').lightBox();
        $('a.lightbox').lightBox();
    });
</script>

Дабавляем overlayBgColor: '#000' и containerResizeSpeed: 500, чтоб получилось:

<script type="text/javascript">
    $(function() {
        $('a[@rel*=lightbox]').lightBox();
        $('a.lightbox').lightBox();
        overlayBgColor: '#000',
        containerResizeSpeed: 500
    });
</script>

Пример рабочей галереи Вы можете посмотреть здесь.
Скачать пример, а также все необходимый файлы можно здесь. Все необходимый скрипты находятся в папке js, но и не забывайте про файл таблицы стилей jquery.lightbox-0.5.css, который находится в папке css.

С уважением, Евгений

Не забывайте подписываться на блог, а также присоединяйтесь ко мне в следующих социальных сервисах: