Скрипт представляет собой плагин к jQuery.
Возможности:

* Подгоняет размеры изображений под разрешение монитора;
* Пририсовывает тень к всплывающему окошку;
* Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
* Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
* Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.

Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):

* непосредственно jquery.fancybox-1.0.0.js – 12 Кб
* сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
* дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
* CSS – около 4 Кб
* изображения – 17 Кб

Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:

1.
/* обязательно */
2.
<script type="text/javascript" src="js/jquery.js"></script>
3.
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
4.

5.
/* опционально */
6.
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
7.
<script type="text/javascript" src="js/jquery.metadata.js"></script>
8.

9.
/* цепляем CSS */
10.
<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">

2. Берем подопытную картинку:

1.
<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:

1.
<p id="”test1”"><a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a></p>

3. Инициализируем плагин:
$(document).ready(function() { $("p#test1 a").fancybox(); });

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

1.
$(document).ready(function() {
2.
$("p#test2 a").fancybox({
3.
'hideOnContentClick': true
4.
});
5.
});

Параметр ‘hideOnContentClick’: true - делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .

2. iBox v2

Самостоятельный скрипт, не являющийся чьим-либо плагином, и мало того, поддерживающий создание своих собственных плагинов.
По умолчанию iBox поддерживает несколько типов объектов для вывода:

* Изображения
* Документы
* Inline - контейнеры
* YouTube - видео

Если вам нужно что-то совсем необычное – можно написать свой собственный плагин к iBox, который будет реализовывать какой-нибудь оригинальный механизм обработки и вывода данных.
Принцип подключения и инициализации iBox:

1. прописываем скрипты:
2. производим настройку глобальных параметров скрипта:
3. используем - для определения «своих» ссылок применяем не id или class элементов-контейнеров, а атрибут rel=«ibox» (или, например, ibox&target=’index.php?page=&my-js-document’ – если нужны какие-то дополнительные параметры).

В разделе «Quick Start» официального сайта приведен перечень глобальных и локальных (прописываемых непосреlственно в rel=«») опций, которые можно использовать при работе скрипта.
Теперь про особо приятные моменты:

* не смотря на богатую функциональность, скрипт весит порядка 27 Кб, что не может не радовать;
* в архиве с iBox вы найдете readme, demo-html, а также две «шкурки»;
* существует реализация скрипта в виде плагина для Wordpress.

Перейти на страницу скачивания.

3. Lightbox v2.0 и Litebox

Lightbox v2.0 – работает при помощи Prototype Framework и Scriptaculous Effects Library.
Работает только с изображениями - т.е. никаких inline-объектов, iframe и прочего. Но с поставленной задачей справляется великолепно.

Использование:
1. Подключаем скрипты:

1.
<script src="js/prototype.js" type="text/javascript"></script>
2.
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
3.
<script src="js/lightbox.js" type="text/javascript"></script>

2. Подключаем CSS

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

3. Добавляем атрибут rel=”lightbox” к ссылкам.

1.
<a title="my caption" rel="lightbox" href="images/image-1.jpg">image #1</a>

title – используется для вывода подписи к изображению. Если вам необходимо вывести галерею изображений – включите в атрибут rel название группы в квадратных скобках. Вот так:

1.
<a rel="lightbox[roadtrip]" href="images/image-1.jpg">image #1</a>
2.
<a rel="lightbox[roadtrip]" href="images/image-2.jpg">image #2</a>
3.
<a rel="lightbox[roadtrip]" href="images/image-3.jpg">image #3</a>

И будет вам счастье ). Единственным минусом использования данного решения является необходимость использования достаточно тяжелых библиотек Prototype и Scriptaculous. Но если в вашем проекте уже используется Prototype – не стоит даже задумываться ).

Скачать Lightbox

Litebox - маленькая, аккуратная модификация Lightbox v2.0, работающая с использованием облегченной версии Prototype (урезана до 4 Кб) . Общий вес скриптов составляет всего 24,2 Кб. Выглядит и работает не хуже своего старшего брата. ) Советую обратить внимание. Скачать архив.
4. ThickBox 3.1

Достаточно мощный скрипт, построенный на базе библиотеки jQuery. ThickBox можно использовать для:

* показа одиночного изображения или группы картинок;
* отображения inline-объектов;
* отображения контента в iframe;
* создания модальных диалоговых окон и отображения результатов ajax-запросов внутри всплывающего окна.

Использование:

1. подключаем скрипты:

1.
<script src="path-to-file/jquery.js" type="text/javascript"></script>
2.
<script src="path-to-file/thickbox.js" type="text/javascript"></script>

2. подключаем CSS

1.
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

3. в зависимости от типа выводимых объектов руководствуемся теми или иными правилами (которые подробно описаны на официальной страничке скрипта).

Коротко о синтаксисе вывода изображений:

а. вывод одиночного изображения

1.
<a class="thickbox" title="здесь_заголовок" href="images/single.jpg"><img src="images/single_t.jpg" alt="Single Image" /></a>

b. галерея изображений:

1.
<a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant1.jpg"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
2.
<a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant2.jpg"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
3.
<a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant3.jpg"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>

Для группировки изображений используется атрибут rel=”gallery-plants”

Итак, нам потребуется:

1. библиотека jQuery (31 Кб)
2. thickbox.js (12 Кб) или thickbox-compressed.js (6 Кб)
3. ThickBox.css (4 Кб) и картинка-анимация loadingAnimation.gif (5,74 Кб)

И всё.) Море удовольствия весом в 45 Кб.
5.1 Плагины к Motools: ReMooz и SqueezeBox

Некоторая информация относительно SqueezeBox содержится вот в этой статье. В заметке рассмотрен пример реализации одной из возможностей плагина – осуществление ajax-запроса и вывод результата в iframe.
Вцелом, ReMooz и SqueezeBox очень похожи и являются детищами одного и того же автора (Harald Kirschner).
Разработчик позиционирует ReMooz как скрипт, идеально подходящий для создания pop-up окошек с картинками, а SqueezeBox – инструмент более широкого профиля. В выше упомянутой статье вы найдете описание возможностей SqueezeBox и требований к его использованию, а сейчас рассмотрим ReMooz.
Как вещает автор данного творения – этот плагин рекомендуется использовать при создании лайтбоксов с изображениями. Скрипт позволяет не просто выводить оригинал изображения, но и настраивать вывод: так, например, мы можем определить, какой процент от размера экрана может занимать выводимая картинка (при необходимости ReMooz уменьшит ее размеры ), добавлять ли к ней прозрачность и нужно ли рисовать тень. За подробностями о настройках плагина – на офсайт, там же – примеры и интструкция к использованию. А если в двух словах, то для работы с ReMooz нам понадобиться:
1. MooTools JavaScript Framework (обязательно 1.2 версии) со следующими включенными методами:

* Element.Dimensions
* Fx.Tween
* Fx.Morph
* Selectors
* DomReady (facultative)

2. ReMooz.js
3. ReMooz.css
4. несколько изображений, участвующих в оформлении всплывающего окошка (найдете на странице описания)
Итого: получаем примерно 55 Кб скриптов и чуть-чуть картинок.
Далее, нам нужно подцепить скрипты и CSS.
После этого заключаем изображения в какой-нибудь подходящий элемент с заданным ID или CLASS:

1.
<div id="demo-photos"><a title="заголовок" href="оригинальное изображение.jpg">
2.
<img src="эскиз.jpg" alt="" />
3.
</a></div>

Теперь прописываем примерно такой обработчик:

1.
window.addEvent('load', function() {
2.

3.
/**
4.
* Этот вариант является вариантом по умолчанию. Никаких дополнительных настроек
5.
*/
6.

7.
ReMooz.assign('#demo-photos a', {
8.
origin: 'img'
9.
});
10.

11.
});

Или так:

1.
window.addEvent('load', function() {
2.

3.
/**
4.
* А это уже посложнее
5.
*/
6.

7.
ReMooz.assign('#demo-photos a', {
8.
'origin': 'img',
9.
'shadow': 'onOpenEnd', // когда у нас должна появляться тень – прорисовка может происходить одновременно с загрузкой или же после нее
10.
'resizeFactor': 0.8, // занять максимум 80% экрана
11.
'cutOut': false, // не скрывать эскиз изображения при просмотре оригинала
12.
'opacityResize': 0.4, // прозрачность
13.
'dragging': false, // запретить перетаскивание окошка
14.
'centered': true // окошко будет появляться в центре экрана, не зависимо от параметров элемента-конейнера });
15.

16.
});

Плагин готов к употреблению ).
5.2 Плагины к Motools: Multibox и Lightbox.

Данные два решения также являются творением одного автора. И опять-таки, одно из них (Lightbox) – «заточено» под вывод графической информации, а второе (Multibox) – призвано обеспечить работу с широким набором данных. Оба скрипта работают на базе Motools 1.11.

Lightbox не имеет каких-либо особенностей. Подхватывает картинки по rel=”lightbox”, а группы картинок по rel=”lightbox[название_группы]”. Инициализируется заклинанием типа:
Lightbox.init({descriptions: ‘.lightboxDesc’)
Имеет дополнительные настройки, с которыми можно ознакомиться на официальной страничке.

Multibox – более функциональный скрипт, работающий не только с изображениями, но и с flash, видео, mp3, html.
Механизм использования несколько отличается от Lightbox – ссылки для обработки определяются на основании CLASS-а контейнера, в котором они содержаться, а атрибут rel – используется для задания дополнительных параметров.

МОРАЛЬ: каждое из рассмотренных решений имеет право на существование. Что именно использовать – зависит от предпочтений разработчика и от конкретной ситуации использования. Например, если в проекте уже используется какая-либо ajax-библиотека, то логично и целесообразно было бы для решения задачи со всплывающими окнами использовать плагин именно для этой библиотеки.
Надеюсь, что данная статья поможет определиться с выбором подходящего решения.

Также жду ваших комментариев и сообщений (возможно, даже заметок) об интересных скриптах всплывающих окон.