htmlBLOG

Блог веб-разработчика

Пишу о создании сайтов, блогов на WordPress, html, css, ajax. Делаю темы для WordPress

Дек 22 2009

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

В рубрике: html & css, Технологии

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

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

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

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

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

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

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

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

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

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

1 2	<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 файл

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

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

4. Создаем нужные нам ссылки
Для картинок:

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

Для мультимедиа:

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

Iframe:

1
2
3

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

AJAX:

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

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

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

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

Обмен постовыми

А вот статейка, в которой Never Lex рассказывает о простом, но интересном раздвижном меню на javascript

Популярность: 71%

Тэги: AJAX, JavaScript, jquery плагины

Связанные записи

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.