Итак, перед нами очередная очень распространенная задача – по клику на эскиз изображения (который фактически является ссылкой) красиво развернуть оригинальную картинку. Красиво – это в нашем случае что-то отличное от target=”_blank” и с каким-нибудь “вау-эффектом”.
Все скрипты, выполняющие данную задачу принято называть лайтбоксами (lightbox). В поисках неплохих решений, мною были запытаны более двух десятков скриптов, но в результате в копилку были включены только нижеследующие.

1. Fancy box

Скрипт представляет собой плагин к 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
3
4
5
6
7
8
9
10
/* обязательно */
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>

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

/* цепляем CSS */
<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. Инициализируем плагин:

1
2
3
$(document).ready(function() {
$("p#test1 a").fancybox();
});

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

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

Параметр ‘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
2
3
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<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
2
3
<a rel="lightbox[roadtrip]" href="images/image-1.jpg">image #1</a>
<a rel="lightbox[roadtrip]" href="images/image-2.jpg">image #2</a>
<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
2
<script src="path-to-file/jquery.js" type="text/javascript"></script>
<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
2
3
<a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant1.jpg"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant2.jpg"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
<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
2
3
<div id="demo-photos"><a title="заголовок" href="оригинальное изображение.jpg">
<img src="эскиз.jpg" alt="" />
</a></div>

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

1
2
3
4
5
6
7
8
9
10
11
window.addEvent('load', function() {

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

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

});

Или так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEvent('load', function() {

/**
* А это уже посложнее
*/

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

});

Плагин готов к употреблению ).

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-библиотека, то логично и целесообразно было бы для решения задачи со всплывающими окнами использовать плагин именно для этой библиотеки.
Надеюсь, что данная статья поможет определиться с выбором подходящего решения.

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

Я играю в Blogowar.ru, чего и вам советую.