Рубрика: 
Просмотров: 16429
Дата: 25.06.09Приветствую Вас, дорогие читатели, как и обещал, приготовил материал по аналогу 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>Готово! До новых встеч!
2.03.10
3.02.10
12.01.10
28.11.09
22.11.09
22.10.09
27.09.09
18.09.09
18.08.09
6.08.09