Подключение и настройка FancyBox
FancyBox — это популярный jQuery плагин, который служит для создания фото галерей и вывода другого контента в модальных окнах. Давайте познакомимся с этим чудо плагином поближе.
Материалы данной статьи устарели. Обновленная версия статьи здесь Подключение и настройка FancyBox 3
Не забудьте подключить библиотеку jQuery к вашему сайту если она еще не подключена.
Подключаем последнюю версию FancyBox скачанную с официального сайта http://fancybox.net/.
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="путь к файлу/fancybox/jquery.fancybox.css" media="screen" /> <script type="text/javascript" src="путь к файлу/fancybox/jquery.fancybox.js"></script> <script type="text/javascript" src="путь к файлу/fancybox/jquery.fancybox.pack.js"></script> |
Вызов fancybox:
|
1 |
$(".gallery").fancybox(); |
На все объекты с классом gallery мы повесили fancybox с параметрами по умолчанию. Теперь посмотрим как все это работает.
Одиночная картинка
Для того чтобы картинка увеличивалась при клике нужно сделать несколько простых шагов. Обернуть картинку ссылкой на увеличенную версию картинки и присвоить ей класс gallery.
|
1 |
<a href="/img/gallery1.jpg" title="подпись к картинке" class="gallery"><img src="/img/gallery1.jpg" width="300"></a> |
Атрибут title тут выполняет роль подписи к картинке
Галерея картинок
Для того чтобы картинки можно было листать между собой, ссылкам в которые они обернуты нужно добавить атрибут rel=’group’.
|
1 2 3 |
<a rel="group" href="/img/gallery2.jpg" class="gallery"><img src="/img/gallery2.jpg" ></a> <a rel="group" href="/img/gallery3.jpg" class="gallery"><img src="/img/gallery3.jpg" ></a> <a rel="group" href="/img/gallery4.jpg" class="gallery"><img src="/img/gallery4.jpg" ></a> |
Свой контент в модальном окне
Чтобы разместить в модальном окне свой контент, нужно повесить на ссылку по клику на которую он будет появляться, класс используемый при вызове FancyBox. В атрибуте href данной ссылки следует указать id вызываемого блока:
|
1 2 3 4 |
<a class="gallery" href="#fox">Лиса?</a> <div style="display:none"> <div id="fox">Лисица — хищное млекопитающее семейства псовых, наиболее распространённый и самый крупный вид рода лисиц.</div> </div> |
Данная возможность часто используется для создания всплывающих с формами обратной связи или роликами с Youtube.
Так же существует возможность показа контента из файла указанного в атрибуте href:
|
1 |
<a class="gallery" href="/test.php">Test/a> |
Более подробно о параметрах FancyBox
Все параметры указанные в таблице ниже, являются настройками плагина. Следует добавлять в вызов FancyBox:
|
1 2 3 4 5 6 |
$(".gallery").fancybox({ "padding" : 20, "frameWidth" : 700, "frameHeight" : 600, "overlayOpacity" : 0.8, }); |
| Параметр | По умолчанию | Описание параметра |
|---|---|---|
| padding | 10 | Отступ между оберткой Fancybox и содержимым |
| margin | 20 | Отступ между Fancybox и окном браузера |
| opacity | false | Включение и отключение прозрачности при переходах |
| cyclic | false | Когда выбрано значение true, галерея станет циклической, переходы «вперед назад» будут бесконечными |
| scrolling | ‘auto’ | Возможность скрытия или отображения полосы прокрутки, CSS свойство overflow |
| width | 560 | Ширина для типа контента «IFRAME» или «SWF» так же применяется для параметра ‘autoDimensions’ если у последнего стоит значение ‘false’ |
| height | 340 | Высота для типа контента «IFRAME» или «SWF» так же применяется для параметра ‘autoDimensions’ если у последнего стоит значение ‘false’ |
| autoScale | true | Если значение true, то FancyBox масштабируется в окне |
| centerOnScroll | false | Если значение true, FancyBox будет по середине при прокрутке страницы |
| hideOnOverlayClick | true | При клике по слою «Overlay» закрывать FancyBox |
| hideOnContentClick | false | При клике по контенту закрывать FancyBox |
| overlayShow | true | Включить/выключить слой «Overlay» |
| overlayOpacity | 0.3 | Прозрачность слоя (от 0 до 1) |
| overlayColor | ‘#555’ | Цвет слоя «Overlay» |
| titleShow | true | Показывать «title» |
| titlePosition | ‘outside’ | Позиция title «За» «внутри» или «над» (‘outside’ ‘inside’ ‘over’) |
| titleFormat | null | Можно использовать html для темизации |
| transitionIn, transitionOut | ‘fade’ | Можно задать эффект между переходами или отключить ‘elastic’, ‘fade’ или ‘none’ |
| speedIn, speedOut | 300 | Скорость эффектов перехода в миллисекундах |
| changeSpeed | 300 | Скорость эффекта |
| changeFade | ‘fast’ | Скорость исчезновения содержания при изменении пунктов галереи |
| easingIn, easingOut | ‘swing’ | Использование для ‘elastic’ анимации |
| showCloseButton | true | Показывать кнопку закрытия |
| showNavArrows | true | Показывать стрелочки для навигации |
| enableEscapeButton | true | По кнопке «ESC» закрывался FancyBox |