FancyBox – простой и фантастический jQuery плагин

Всем привет. Не так давно потребовалось мне сделать на одном сайте галерею/каталог. Аяксовых галерей великое множество, но нужна была не просто галерея, а именно каталог, который выглядел бы как галерея, но в тоже время представлял собой полноценный каталог продукции. Запутано да?

Попробую объяснить. Есть список товаров, а есть страница описания товара. Нужно было выводить описание товара без перезагрузки страницы. Надо также упомянуть что описание товара — это всегда отдельная страница, которую формируется CMS и никуда от этого не денешься.

Вот собственно о решении этой задачи и пойдет сегодня речь.

Решением задачи стал jQuery плагин FancyBox. Это плагин для отображения изображений, HTML и мультимедиа контента в лайтбокс-стиле. И теперь о нем поподробнее.

Возможности FancyBox:

• Добавляет тень под объектом и затемняет всю остальную страницу
• Группирует связанные между собой пункты и добавляет навигацию
• Может показывать изображения, встроенный мультимедиа или подгружать казаный url в iframe
• Можно настраивать параметры через CSS
• Поддерживает эффекты перехода с помощью easing plugin

Как добавить FancyBox

Все предельно просто.

1. Скачиваем последнюю версию с Google code.

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

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

3. Подключаем FancyBox CSS файл

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

Не забываем поправить путь к картинкам оформления.

4. Создаем нужные нам ссылки

Для картинок:
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Для мультимедиа:
<a id="inline" href="#data">Это покажет содержание элемента, который имеет id="data"</a>

Для Iframe:
<a href="http://www.htmlblog.ru?iframe">Это iframe</a>
или
<a class="iframe" href="http://www.htmlblog.ru/">Это iframe</a>

ajax:
<a href="http://www.htmlblog.ru/data.php">Это контент подгружаемый ajax</a>

Так же можно использовать атрибут title если вы хотите, чтобы показывался заголовок.

Примечание: Вы можете установить hideOnContentClick false если вызываете iframed или подгружаемый контент с интерактивными элементами (например, кнопками для фильмов, ссылки на другие страницы)

Вот вроде бы и все, что хотел сегодня рассказать. Еще примеры и более тонкие настройки для работы с этим плагином ищите на странице плагина.
Удачи.

---

2leep.com

---

---