Настройка FancyBox
Рассмотрим то, как действует Fancybox на JQuery и узнаем, как его настраивать.
Это один интересный плагин, с помощью которого, при нажатии на фотографии они открываются на весь экран. Безграничные способности для того, чтобы создавать легкие, симпатичные и удобные проекты. При этом такой плагин имеет простую настройку и быстрое подключение. Для этого скачайте Fancybox JQuery и осуществите его подключение в <head>, как это показано ниже.
Как отобразить картинку
Данный плагин обладает несколькими параметрами, с помощью которых можно отображать определенные элементы страниц. Рассмотрим, как можно настроить отображение картинки. Чтобы это сделать, пропишите следующий код:Теперь в силу вступает сам плагин. Чтобы отобразить картинку, пропишем следующее.
В атрибуте href необходимо указать путь к картинке, а в теге <a> прописывается превью.
Как реализовать галерею и отобразить группу изображений
Чтобы решить эту задачу, необходимо выполнить один простой шаг - добавить в тег <a> специальный атрибут <rel>, где будет указано то или иное значение (обязательно уникальное) для отдельной группы изображений.
Также необходимо прописать параметры того, как будет отображаться картинка, к теге
.Итак, можно вести счет числа картинок, находящихся в определенной группе, а также отображать номер и заголовок изображения. Однако для этого необходимо его наличие в title вышеупомянутого тега <a>.
Как отобразить контент
Плагин, который мы рассматриваем в данной статье, можно также использовать для того, чтобы в модальном окне отображать контент. Рассмотрим на примере:
Вывод контента
По умолчанию display:none, то есть контент скрыт. Однако, когда кликают по ссылке, плагин отображает контент div с ID, который был указан в href. Также обратите внимание на <head>.
Надеемся, что вы уловили общую суть. А об остальных возможностях плагина мы еще поговорим.
Более подробно о параметрах FancyBox
| Параметр | По умолчанию | Описание параметра |
|---|---|---|
| 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 |
| onStart | null | Будет вызван первым до загрузки содержимого |
| onCancel | null | Будет вызван после отмены загрузки |
| onComplete | null | Будет вызван после показа контента |
| onCleanup | null | Будет вызван перед закрытием |
| onClosed | null | Будет вызван после закрытия FancyBox |
Есть хороший конкурент Fancybox - это плагин Lightbox, он достаточно красивый, ознакомиться с ним вы сможете в статье - Настройка Lightbox.
E-mail: 
Telegram:
Оставить комментарий