www.Litecode.ru – Сборник рецептов для создания сайтов

Lightbox на jQuery

ГлавнаяJavaScript → Lightbox на jQuery

В статье приведен пример запуска плагина галереи lightbox на jquery и здесь же можно скачать рабочий вариант. Вот так она собственно работает:



Данная реализация lightbox хороша тем, что ею можно управлять через конфигурационный хеш. Запускается очень легко. Для запуска плагина необходима любая библиотека jquery, начиная с версии 1.2.6, сам плагин lightbox и стилевой файл. В архиве, чуть ниже, лежит готовый вариант. Скачайте, распакуйте и откройте файл index.html в любом браузере. Должно работать.

Скачать lightbox

Надеюсь как запустить всем понятно. Расскажу лишь как управлять настройками lightbox. Сразу отмечу, что плагин не работает в IE 6, и поэтому ставим условие инициализации для всех кроме «ослика». Далее еще один важный момент: $(document).ready, так как до готовности дерева DOM инициализации не прокатит. Сам процесс инициализации происходит так:

$("#gallery a").lightbox();

Пример исходного кода:

<link href="/jquery-lightbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/jquery-lightbox.js"></script>

<div id="gallery">
    <div class="gal" align="center"><a rel="lightbox-tour"  title="Капли" alt=""  href="/demo/img/jquery-lightbox/1.jpg">
        <img title="" alt=" " src="/demo/img/jquery-lightbox/1_sm.jpg"/></a><br/>
    </div>
    <div class="gal" align="center"><a rel="lightbox-tour"  title="Еще капли" alt=""  href="/demo/img/jquery-lightbox/2.jpg">
        <img title="" alt=" " src="/demo/img/jquery-lightbox/2_sm.jpg"/></a><br/>
    </div>
    <div class="gal" align="center"><a rel="lightbox-tour"  title="Снова капли" alt=""  href="/demo/img/jquery-lightbox/3.jpg">
        <img title="" alt=" " src="/demo/img/jquery-lightbox/3_sm.jpg"/></a><br/>
    </div>
    <div class="gal" align="center"><a rel="lightbox-tour"  title="Опять капли" alt=""  href="/demo/img/jquery-lightbox/4.jpg">
        <img title="" alt=" " src="/demo/img/jquery-lightbox/4_sm.jpg"/></a><br/>
    </div>
</div>

<script>
if ( !(navigator.userAgent.indexOf('MSIE 6') >= 0) ){
	
	$(document).ready(function(){
        $("#gallery a").lightbox();
        $.Lightbox.construct({
            "speed": 500,
            "show_linkback": true,
            "keys": {
                close:	"q",
                prev:	"z",
                next:	"x"
            },
            "opacity": 0.8,
            text: {
                image:		"Картинка",
                of:			"из",
                close:		"Закрыть",
                closeInfo:	"Завершить просмотр можно, кликнув мышью вне картинки.",
                help: {
                    close:		"",
                    interact:	"Интерактивная подсказка"
                },
                about: {
                    text: 	"",
                    title:	"",
                    link:	"/index.shtml"
                }
            },
            files: {
                images: {
                    prev:		"/demo/img/jquery-lightbox/prev.gif",
                    next:		"/demo/img/jquery-lightbox/next.gif",
                    blank:		"/demo/img/jquery-lightbox/blank.gif",
                    loading:	"/demo/img/jquery-lightbox/loading.gif"
                }
            }
        });
    });
}
</script>

speed - скорость эффекта открытия фото и его закрытия, в милисекундах.

Параметры хеша keys: close, prev и next это клавиши, которыми осуществляется альтернативное управление просмотром галереи.

opacity — прозрачность затемняемого фона. Принимает значения от 0 до 1. Цвет фона можно поменять в стилевом файле.

Параметры хеша images, вложенного в хеш files, это пути к картинкам для фона, анимации индикатора загрузки и кнопок назад-вперед.

Так же в хеше text можно менять надписи для навигации.