Fix Blog

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

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:

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

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

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

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

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

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

3. Инициализируем плагин:

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

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

$(document).ready(function() {
$("p#test2 a").fancybox({
‘hideOnContentClick’: true
});
});

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