Lightbox: презентационный инструмент

На мой взгляд, одним из эффектных презентационных инструментов для документов или изображений является Lightbox. Содержимое основной страницы затеняется или осветляется, и поверх него накладывается слой, например, с изображением.

Архив с исходным кодом и файлами изображений

Конструктор

  • new LightBox(options);

    Создает новый объект Lightbox с указанными параметрами или значениями по-умолчанию.

Методы

  • show(options)

    Отображает Lightbox с заданными параметрами или параметрами по-умолчанию.

  • hide()

    Закрывает Lightbox. Этот метод автоматически вызывается после нажатия пользователем значка «Закрыть»

Конфигурационные параметры

  • baseUrl

    Полный путь до оформления. Необходимость в этом параметре в основном вызвана тем, что для правильного отображения полупрозрачных PNG в IE6 используется фильтр AlphaImageLoader.

  • opacity

    Степень прозрачности подложки от 0 до 1.

  • color

    Цвет подложки – любое допустимое значение CSS.

  • showCallback

    Функция, которая будет вызвана после отображения Lightbox. В качестве аргумента функции передается DOMNode контейнера.

  • hideCallback

    Функция, которая будет вызвана после закрытия Lightbox.

  • dimensionsCallback

    Функция, которая возвращает требуемые значения ширины и высоты контейнера. Если она не будет определена, то контейнер будет занимать 80% от размеров окна по ширине и высоте.

Чтобы изменить тень, отбрасываемую контейнером, создайте аналогичное рисунку изображение и разрежьте его на 8 частей. Части тени нужно сохранить в формате PNG-24 с прозрачностью.

Шаблон для тени

Если ширина тени будет больше чем в шаблоне, то придется скорректировать размеры блоков и их позиционирование в коде.

Пример демонстрирует использования Lightbox в качестве просмотрщика изображений с Flickr.

var lb = new LightBox({
    'dimensionsCallback': function () {
        return {
            width: 240,
            height: 160
        };
    },
    'showCallback': function (node) {
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=apple,mac&tagmode=all&format=json&jsoncallback=?",
                function(data) {
                    $(node).append('<img src="' + data.items[0].media.m + '" title="' + data.items[0].title + '" />');
                });
    }
});

lb.show();