Npm
Содержание:
3. Основные настройки
Тут описаны лишь основные настройки. Шаблоны, мобильные и редко используемые конфигурации можно посмотреть в
Пример использования:
$(»).fancybox({
loop: true,
autoFocus: false
});
|
1 |
$(»).fancybox({ looptrue, autoFocusfalse }); |
По умолчанию они имеют следующие значения:
Включает бесконечную навигацию по галерее.
Горизонтальное расстояние между слайдами.
Включает навигацию с помощью клавиатуры.
Запрещает подписи модального окна перекрывать его содержимое. Значение — разрешает.
Показывает навигационные стрелки по краям экрана (для галереи)
Показывает счетчик изображений в верхнем левом углу (для галереи)
Маленькая кнопка закрытия модального окна
— автоматически включена для «html», «inline» или «ajax» окон
— включена для всех окон
— выключена для всех
Показывает тулбар (справа вверху)
— автоматически выключится, если активен
— включен для всех окон
— выключен для всех
Устанавливает, какие кнопки будут показаны в тулбаре
Отключает правую кнопку мыши и использует простую защиту изображений
Делает контент «модальным» — отключает навигацию по клавиатуре, кнопки закрытия и т. д
Анимационный эффект открытия и закрытия окон
— выключен
— увеличение изображения из эскиза и уменьшение в него при закрытии
Продолжительность эффекта анимации
Прозрачность при открытии и закрытии
Эффект перехода между слайдами
Может быть: , , , , , или (без эффекта)
Продолжительность эффекта перехода между слайдами
Скрывает вертикальную полосу прокрутки браузера
Устанавливает фокус на первом фокусируемом элементе после открытия
Ставит фокус обратно на активный элемент после закрытия
Не позволяет пользователю сфокусироваться на элементе вне модального контента
Открывает окна в полный экран
— разрешает перетаскивание содержимого по вертикали
— продолжает движение после освобождения мыши / касания
Автоматически включает слайдшоу с заданной скоростью.
— отображение миниатюр при открытии
— скрывает сетку миниатюр, когда начинается анимация закрытия
— родительский элемент
— вертикальная (y) или горизонтальная (x) прокрутка
Прокрутка изображений колесом мышки
Закрытие окна по клику вне его. — отключает
Instructions
Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:
<!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script> <!-- Optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox.
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> <a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Attach fancyBox when the document is loaded. If you are not familiar with jQuery, please, read this tutorial for beginners.
Instructions
Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:
<!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script> <!-- Optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox.
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> <a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Attach fancyBox when the document is loaded. If you are not familiar with jQuery, please, read this tutorial for beginners.
Возможности Easy Fancybox в WordPress
- кроме базовой графики доступны форматы Webp и SVG;
- во всплывающем окне разрешается отображать видео с Vimeo, Youtube, Dailmotion;
- поддерживает PDF и Flash файлы;
- может работать с обычным HTML кодом и содержимым внешних страниц;
- совместим с базовой галереей Вордпресс, а также NextGEN;
- у вас не возникнет проблем с Imagemap’ами, бесконечным скроллом Jetpack и при задании лайтбокса пунктам меню;
- про автоматическую обработку картинок уже упоминалось выше;
- из доп.фишек есть автосрабатывание попапа при загрузке страниц веб-ресурса;
- допускается использование как модальное окно для Contact Form 7 — альтернативу Easy Modal (инструкция в описании в репозитории);
- в настройках можно выбрать эффекты открытия, цвет и прозрачной оверлея и некоторые другие визуальные параметры.
Для плагина Fancybox имеется премиальная версия за 12 баксов + последующей подпиской по 4 бакса в год. Из про фишек выделяются: дополнительные опции оформления и автосрабатывания попапа, эффекты слайдшоу, показ заголовка при наведении и т.п. Если вам хочется расширить базовые функции, почитайте об этом детальнее. Мне лично бесплатной версии хватает с головой.
Также на официальной странице модуля есть парочка вариантов почему не работает Fancybox в WordPress, это могут быть:
- конфликты с аналогичными похожими решениями;
- отсутствие wp_footer() в футере;
- некоторые проблемы с плагинами: All in One SEO Pack, jQuery Updater, а также Google Analytics на WordPress и парочка других;
- конфликты с шаблонами — часто в премиальных есть свой скрипт для подобного эффекта (ниже рассмотрю эту ситуацию);
Кроме того, в репозитории на wordpress.org есть чеклист как проверить потенциальные ошибки и какие шаги нужно совершить дабы их исправить. Это одно из немногих расширений, где так много времени уделено возможным проблемам и причинам некорректного функционирования. Если у вас что-то подобное случилось, советую ознакомиться.
Npm specific
** NOTE: I didn’t realize npm’s limitations on versioning. They only allow three numbers. At first I was aiming to keep the versioning equal to fancybox’s, but this is no longer possible without deleting the repo and starting over. You can find the fancybox version this repo uses in either package.json’s «original-version» property, or in a browser console by running: $.fancybox.version.
Install
Example usage
(1) Make sure your html file is referencing the browserified version of your javascript.
(2) This is where fancybox attaches itself to the jquery object.
When turning this into an npm module I decided to standardize the structure a bit. Before fancybox relied on all asset files residing in the same directory. Now if you were to reference the css directly, it expects the images to be relatively located at the ‘../img’ directory. For those unfamiliar, this structure makes more sense because css files should be all concatenated and minified while images won’t be. This means typically you’ll want your css in a separate folder. However, if this doesn’t work with your existing structure then you’ll have to change the paths manually. If you opt to reference the scss instead of the css file, then you have the option of modifying the sass variable ‘$fancybox-image-url’ to match your image folder path. By default this path will be set to ‘../img’. (Note the lack of a trailing slash)
Npm specific
** NOTE: I didn’t realize npm’s limitations on versioning. They only allow three numbers. At first I was aiming to keep the versioning equal to fancybox’s, but this is no longer possible without deleting the repo and starting over. You can find the fancybox version this repo uses in either package.json’s «original-version» property, or in a browser console by running: $.fancybox.version.
Install
Example usage
(1) Make sure your html file is referencing the browserified version of your javascript.
(2) This is where fancybox attaches itself to the jquery object.
Please visit the official site for more info. Their official github repository can also be found here.
New structure of asset files (css/img/scss)
When turning this into an npm module I decided to standardize the structure a bit. Before fancybox relied on all asset files residing in the same directory. Now if you were to reference the css directly, it expects the images to be relatively located at the ‘../img’ directory. For those unfamiliar, this structure makes more sense because css files should be all concatenated and minified while images won’t be. This means typically you’ll want your css in a separate folder. However, if this doesn’t work with your existing structure then you’ll have to change the paths manually. If you opt to reference the scss instead of the css file, then you have the option of modifying the sass variable ‘$fancybox-image-url’ to match your image folder path. By default this path will be set to ‘../img’. (Note the lack of a trailing slash)
Более подробно о параметрах FancyBox
Все параметры указанные в таблице ниже, являются настройками плагина. Следует добавлять в вызов FancyBox:
$(«.gallery»).fancybox({
«padding» : 20,
«frameWidth» : 700,
«frameHeight» : 600,
«overlayOpacity» : 0.8,
});
|
1 |
$(«.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 |
5. Тема оформления
Вместо родного стиля fancybox подключаем стиль jquery.fancybox.atuin.css и инициализирум:
$(»).fancybox({
/* Стрелки влево и вправо */
btnTpl: {
arrowLeft:
‘<button data-fancybox-prev class=»fancybox-button fancybox-button—arrow_left» title=»`PREV`»>’ +
‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’ +
«</button>»,
arrowRight:
‘<button data-fancybox-next class=»fancybox-button fancybox-button—arrow_right» title=»`NEXT`»>’ +
‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’ +
«</button>»
},
/* Руссификация */
lang: «ru»,
i18n: {
ru: {
CLOSE: «Закрыть»,
NEXT: «Следующий»,
PREV: «Предыдущий»,
ERROR: «Контент не может быть загружен. <br/> Попробуйте позже.»,
PLAY_START: «Начать слайдшоу»,
PLAY_STOP: «Остановить слайдшоу»,
FULL_SCREEN: «Полный экран»,
THUMBS: «Эскизы»,
DOWNLOAD: «Скачать»,
SHARE: «Поделиться»,
ZOOM: «Увеличить»
}
}
});
|
1 |
$(»).fancybox({ /* Стрелки влево и вправо */ btnTpl{ arrowLeft ‘<button data-fancybox-prev class=»fancybox-button fancybox-button—arrow_left» title=»`PREV`»>’+ ‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’+ «</button>», arrowRight ‘<button data-fancybox-next class=»fancybox-button fancybox-button—arrow_right» title=»`NEXT`»>’+ ‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’+ «</button>» }, /* Руссификация */ lang»ru», i18n{ ru{ CLOSE»Закрыть», NEXT»Следующий», PREV»Предыдущий», ERROR»Контент не может быть загружен. <br/> Попробуйте позже.», PLAY_START»Начать слайдшоу», PLAY_STOP»Остановить слайдшоу», FULL_SCREEN»Полный экран», THUMBS»Эскизы», DOWNLOAD»Скачать», SHARE»Поделиться», ZOOM»Увеличить» } } }); |
Support
- Help
- FAQ
You can ask a questions using the StackOverflow site where you are most likely to get answer quickly as many Javascript experts spend time on the site. Make sure you add the tags «jquery» and «fancybox» when posting.
If you run into an issue and need to report a bug, please create an issue on GitHub issues and I will investigate. But do not forget to check FAQ, first!
Follow @thefancyapps for the latest updates.
1. It doesn’t work at all. The image opens up in a new page. What’s wrong?
Check if you have included all files and set up FancyBox correctly.
Look for JavaScript error messages, they might help you to locate the problem.
If you see something like Uncaught TypeError: undefined is not a function:
1) Check if fancybox.js file is indeed loaded
2) Check if you have not included jQuery library more than once
2. Can a FancyBox appear over the top of my Flash content?
Yes, read this explanation
3. Can the script be called from an iframe?
If all necessary files are included in the parent window, then you can, like:<a href=»javascript:parent.$.fancybox.open({href : ‘myurl’});»>Open something</a>
4. How can I close FancyBox from other element? ?
Just call $.fancybox.close() on your onClick event
5. I`m using custom urls for images (for example, PHP created images — index.php?action=image&id=123) and FancyBox shows source of image. Why?
FancyBox gueses content type from url but sometimes it can be wrong. The solution is to force your type, like so — $(«.selector»).fancybox({‘type’ : ‘image’});
6. FancyBox is not working on all images, only first one opens. What’s wrong?
If you are using ID as selector $(«#selector»).fancybox(); then switch to classes — $(«.selector»).fancybox();
Support
- Help
- FAQ
You can ask a questions using the StackOverflow site where you are most likely to get answer quickly as many Javascript experts spend time on the site. Make sure you add the tags «jquery» and «fancybox» when posting.
If you run into an issue and need to report a bug, please create an issue on GitHub issues and I will investigate. But do not forget to check FAQ, first!
Follow @thefancyapps for the latest updates.
1. It doesn’t work at all. The image opens up in a new page. What’s wrong?
Check if you have included all files and set up FancyBox correctly.
Look for JavaScript error messages, they might help you to locate the problem.
If you see something like Uncaught TypeError: undefined is not a function:
1) Check if fancybox.js file is indeed loaded
2) Check if you have not included jQuery library more than once
2. Can a FancyBox appear over the top of my Flash content?
Yes, read this explanation
3. Can the script be called from an iframe?
If all necessary files are included in the parent window, then you can, like:<a href=»javascript:parent.$.fancybox.open({href : ‘myurl’});»>Open something</a>
4. How can I close FancyBox from other element? ?
Just call $.fancybox.close() on your onClick event
5. I`m using custom urls for images (for example, PHP created images — index.php?action=image&id=123) and FancyBox shows source of image. Why?
FancyBox gueses content type from url but sometimes it can be wrong. The solution is to force your type, like so — $(«.selector»).fancybox({‘type’ : ‘image’});
6. FancyBox is not working on all images, only first one opens. What’s wrong?
If you are using ID as selector $(«#selector»).fancybox(); then switch to classes — $(«.selector»).fancybox();
Easy FancyBox: основные особенности плагина
Как и предыдущий плагин, Easy FancyBox для WordPress начинает работать сразу после стандартной установки на CMS по отношению ко всем изображениям. Если вы захотите настроить параметры «под себя», то на странице по адресу в консоли «Настройки» — «Медиафайлы» обнаружите опции, практически идентичные опциям FancyBox для Вордпресс.
Характерными же его отличиями являются:
- плагин частично русифицирован, поэтому разобраться в его настройках самостоятельно не составит большого труда;
- при базовых установках картинки автоматически не объединяются в галереи, Easy FancyBox выводит во всплывающем окне только то изображение, по которому кликнули. Чтобы отобразить группу файлов в лайтбоксе, необходимо создать стандартную галерею Вордпресс в режиме редактирования записи.
Или же в настройках плагина в блоке «Gallery» в поле «Autogallery» выбрать пункт «Все в одной галерее»;
- в варианте «из коробки» Easy FancyBox размещает поверх изображений название, взятое из атрибута alt. Чтобы отключить эту опцию, в блоке «Appearance» снимите галочку возле поля «Показать название»;
- плагин позволяет выбрать тип медиафайлов, которые будут открываться в модальном окне.
Каких-либо существенных недостатков в работе плагина не выявлено. Но если в ваш шаблон ВП встроен «родной» лайтбокс, велика вероятность конфликта и может оказаться, что Easy FancyBox для WordPress не работает. В таком случае имеет смысл обратиться в службу поддержки.
Instructions
Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:
<!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script> <!-- Optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox.
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> <a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Attach fancyBox when the document is loaded. If you are not familiar with jQuery, please, read this tutorial for beginners.
API и опции к FancyBox 1.3.4
Доступные опции
Влиять на работу плагина fancyBox можно при помощи пользовательских настроек, для этого передайте функции fancybox пользовательскую константу , в которой должны содержаться пользовательские настройки вида .
| Ключ | Значение по умолчанию | Описание |
|---|---|---|
| padding | 10 | Пространство между оболочкой и контеном (изображением) |
| margin | 20 | Пространство между областью просмотра и оболочкой (контейнером FancyBox) |
| opacity | false | Когда true, прозрачность контена меняется при переходах (elastic) |
| modal | false | Когда true, для ‘overlayShow’ ставится ‘true’ и для ‘hideOnOverlayClick’, ‘hideOnContentClick’, ‘enableEscapeButton’, ‘showCloseButton’ ставится ‘false’ |
| cyclic | false | Когда true, то пользователи смогут перейти к первому изображению при достижении последнего изображения, щелкнув по кнопке ‘Вперед’, а также перейти к последнему, находясь на первом, кликнув по кнопке ‘Назад’ |
| scrolling | ‘auto’ | Передает значение для свойства CSS overflow, требуется для скрытия полосы прокрутки. Возможные варианты: ‘auto’, ‘yes’, или ‘no’ |
| width | 560 | Ширина контента для типов ‘iframe’ и ‘swf’. Также ставится для строчного контента, если ‘autoDimensions’ равно ‘false’ |
| height | 340 | Высота контента для типов ‘iframe’ and ‘swf’. Также ставится для строчного контента, если »autoDimensions’ равно ‘false’ |
| autoScale | true | Если true, FancyBox масштабируется в пределах области просмотра. |
| autoDimensions | true |
Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам. |
| centerOnScroll | false | Когда true, FancyBox центрируется при прокрутке (скроллинге) страницы |
| ajax | { } | Опции Ajax. Отметьте: ‘error’ и ‘success’ будут перезаписаны FancyBox |
| swf | {wmode: ‘transparent’} | Параметр выставляется для swf объекта |
| hideOnOverlayClick | true | Включает/выключает закрытие FancyBox при клике на странице |
| hideOnContentClick | false | Включает/выключает закрытие FancyBox при клике на контенте |
| overlayShow | true | Включить/выключить фон за пределами FancyBox |
| overlayOpacity | 0.3 | Прозрачность фона за пределами FancyBox (от 0 к 1; по умолчанию — 0.3) |
| overlayColor | ‘#666’ | Цвет фона за пределами FancyBox |
| titleShow | true | Включить/выключить показ атрибута title |
| titlePosition | ‘outside’ | Позиция атрибута title. Можно поставить ‘outside’, ‘inside’ или ‘over’ |
| titleFormat | null | Функция обратного вызова для темизации области title. Вы можете поставить любой html — счетчик в виде изображения или обычную навигацию. |
| transitionIn, transitionOut | ‘fade’ | Эти две настройки контролирует то, как крупное изображение появляется (переход) на экране. Могут принимать значения ‘elastic’, ‘fade’ или ‘none’ |
| speedIn, speedOut | 300 | Скорость fade и elastic переходов в миллисекундах |
| changeSpeed | 300 | Скорость изменения рамки при переходе от одного изображения к другому, в миллисекундах |
| changeFade | ‘fast’ | Скорость проявления контента при смене пунктов галереи |
| easingIn, easingOut | ‘swing’ | Используется, если значения transitionIn, transitionOut равны elastic. Принимают значения easing-плагина |
| showCloseButton | true | Включить/выключить отображение кнопки закрыть |
| showNavArrows | true | Включить/выключить отображение стрелок навигации |
| enableEscapeButton | true | Включить/выключить закрытие FancyBox по нажатию на кнопке Esc |
| onStart | null | Функция, будет вызвана перед попыткой загрузить контент |
| onCancel | null | Функция, будет вызвана после отмены загрузки |
| onComplete | null | Функция, может быть вызвана однажды после показа контента |
| onCleanup | null | Функция, вызывается только перед закрытием |
| onClosed | null | Функция, вызывается один раз после закрытия FancyBox |
Публичные функции
| Метод | Описание |
|---|---|
| $.fancybox.showActivity | Показывает загрузку анимации |
| $.fancybox.hideActivity | Скрывает загрузку анимации |
| $.fancybox.next | Показывает следующий элемент галереи |
| $.fancybox.prev | Показывает предыдущий элемент галереи |
| $.fancybox.pos | Показывает элемент галереи по заданному индексу |
| $.fancybox.cancel | Отменяет загрузку контента |
| $.fancybox.close | Скрывает FancyBoxДля iframe использовать — parent.$.fancybox.close(); |
| $.fancybox.resize | Автоматически подстраивает размеры FancyBox: высота FancyBox подстраивается под высоту контента |
| $.fancybox.center | Центрирует FancyBox в области просмотра |
