Приветствую Вас, дорогие читатели, как и обещал, приготовил материал по аналогу LightBox'a - FancyBox'у.

Данный клон изготовлен на jQuery, поэтому наблюдаем хорошую физику. Предлагаю посмотреть FancyBox в действии и приступить к его установке, скачав исходники:

Шаг №1

Подключаем необходые для работы скрипты, которые находятся в папке js:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>

Шаг №2

Подключаем таблицу стилей:

<link href="style.css" rel="stylesheet" type="text/css">

Если Вы используете свою таблицу стилей, то скопируйте содержимое style.css.

Шаг №3

Вставляем небольшой скрипт, который вызывает необходимую для работы функцию:

<script type="text/javascript">
$(document).ready(function() {
$("a").fancybox();
});
</script>

Шаг №4

Копируем необходимую графику из папки image/fancybox/ к себе на сайт и прописываем ссылки на изображения:

<a title="описание" href="image/1_b.jpg"><img src="image/1_s.jpg" /></a>

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

<a rel="group" title="описание" href="image/2_b.jpg"><img src="image/2_s.jpg" /></a>
<a rel="group" title="описание" href="image/3_b.jpg"><img src="image/3_s.jpg" /></a>
<a rel="group" title="описание" href="image/4_b.jpg"><img src="image/4_s.jpg" /></a>

Готово! До новых встеч!