На мой взгляд, одним из эффектных презентационных инструментов для документов или изображений является 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();