imapo.ru
Что такое Fancybox?
Fancybox на базе JavaScript JQuery является инструментом, позволяющим производить масштабирование и повышать функциональность изображений, мультимедиа-элементов и HTML-контента на веб-страницах. Плагин имеет простую настройку и удобное подключение:
Инструкция по установке:
Скачайте плагин Fancybox и распакуйте его. Далее скопируйте файлы, включающие сценарий и стили. Обязательно убедитесь в наличии JS, CSS файлов на сервере и настройте пути в скриптах. Проверьте, загружена ли библиотека JQuery.
Примеры установки Fancybox-1.3.4
Скачиваем jquery.fancybox-1.3.4.zip распаковываем архив и устанавливаем себе в папку jquery.fancybox-1.3.4. Внутри находим папку Fancybox и заливаем ее на сервер. К примеру, в /wp-content/plugins/. Ее содержимое должно попасть сюда — ваш сайт.ru/wp-content/plugins/fancybox/.
Далее открываем файл functions.php, после чего добавляем такие строки:
Сначала мы добавили шаблон сайта, а затем с помощью wp_enqueue_script (); добавили js-скрипт плагина, так чтобы он шел после основного jQuery.
Далее открываем файл header.php и перед </head> прописываем такой js-код вызова:
Очищаем кэш и перезагружаем страницу с картинками. Галерея Fancybox выводит на страницу все картинки, что очень удобно. Можно видеть сразу несколько изображений, перемещаясь по ним стрелками вперед-назад или прокручивая колесико мыши. Если нужно закрыть изображение, достаточно нажать на крестик.
Скачать последнюю версию плагина можно найти тут.
Зачем нужен Fancybox
Сегодня существуют разные «zoom» для изображений, но у каждого из них имеются свои недостатки. К примеру, Thickbox и Lightbox затемняют фон, слишком большие и не очень привлекательные, да и как такового «эффекта зума» они не дают. Не так давно Cabel из Panic создал довольно интересный плагин FancyZoom, однако весит он более 150 Кб и к тому же платный.
Появление FancyBox в этой ситуации стало настоящим чудом. Во-первых, плагин использует jQuery, который включается в стандартную поставку WordPress, во-вторых, весит всего 27 Кб:
Основные возможности Fancybox
К неоспоримым преимуществам плагина относят:
- Возможность выбора 1 из 3 эффектов открытия/закрытия бокса с изображением;
- Возможность выбора бокса в overlay (режиме наложения);
- Реализацию мини-галереи картинок на странице;
- Возможность просмотра галереи путем прокрутки колесика мыши;
- Возможность использования плагина для отображения в боксе swf-анимаций и простого текста;
- Возможность работы в режиме iframe (используется для открытия в боксе другого ресурса).
Параметры Fancybox позволяют без труда провести точную настройку и получить должный эффект.
Основные разновидности и версии Fancybox
Некоторые веб-мастера по-прежнему отдают предпочтение версии Fancybox 1.3.4. Без сомнения версия 2 круче, быстрее и легче, но в ней отсутствуют те функции, благодаря которым можно интегрировать скрипт без внесения изменения во все посты блога. Для тех, кто между старым, надежным и новым, функциональным выбирает второе, хочется отметить несколько наиболее заметных изменений.
В Fancybox 2 вас ждет:
- Расширенный набор вспомогательных функций;
- Возможность использования слайд-шоу;
- Высокая отзывчивость (всплывающие окна масштабируются в соответствии с размерами окна браузера);
- Новый эффект переходов между картинками в галерее;
- Использование CSS3 (скругление углов, тени и прочее);
- Обновление настроек:
Почему может не работать Fancybox?
Причин возникновения проблем в работе плагина может быть несколько.
Самыми распространенными из них считаются:
- Конфликт скриптов Fancybox с другими скриптами (к примеру с PrestaShop);
- Наличие ошибок Javascript в браузере;
- Ошибка шаблона.
Не работает Fancybox и по причине блокировки плагина брандмауэром, антивирусом или блокировщиком рекламы.
Основные параметры Fancybox
Параметры Fancybox или, как их еще называют, ключи влияют на выполнение тех или иных задач. Они позволяют работать с такими типами контента как Ajax, ролики Youtube, Google maps, флеш-ролики swf, открывать контент в iframe. Изменить их значения можно непосредственно в FancyBox JS:
Настройка Fancybox
Самые важные настройки Fancybox for WordPress находятся во вкладках Appearance, Animation и Behavior. С их помощью можно обеспечить соответствие визуального оформления картинок с общим дизайном сайта.
На вкладке Appearance можно произвести настройку цвета и включение рамки изображений (Border). Настройка кнопки закрытия окна с картинкой, выбор положения и цвета внутреннего отступа производится в Button. Цвет, прозрачность и затемнение заднего фона можно отрегулировать в Overlay Options. Выбрать цвет и место выведения заголовка можно в Title. Navigation Arrows — стрелки навигации, перелистывания.
Скорость анимации и прозрачность картинок можно настроить в Zoom Options во вкладке Animation. Эффект растягивания или затухания выбираем в Transition Type. Подбор шаблона для эффектов осуществляется в Easing.
Во вкладке Behavior можно установить автоматическое растягивание картинки согласно размеру экрана (Auto Resize to Fit), а также выбрать способ закрытия изображений (Close with «Esc», Close on OverlayClick, Close on ContentClick) и зацикливание их показа (Cyclic Galleries).
Fancybox имеет несколько настроек режимов вывода картинок, видов надписи над картинками, скорости перелистывания и т.д.
Рассмотрим, как производится настройка Fancybox:
- Как отобразить картинку?
Чтобы настроить отображение картинки, необходимо прописать следующий код:
Далее пишем следующее:
В href следует указать путь к изображению, а в <img> прописать превью.
- Как отобразить группу изображений и реализовать галерею?
В данном случае следует добавить в <a> атрибут <rel>, в котором будет отражено то или иное значение для отдельной группы изображений:
Нужно указать параметры отображения:
Если необходимо вести подсчет картинок в определенной группе или показывать заголовок изображения и номер, пропишите эту информацию в title.
- Как отобразить контент?
Плагин Fancybox можно использовать для того, чтобы выводить контент в модальное окно.
Например:
По умолчанию контент скрыт — display:none. Но как только пользователь кликнет по ссылке, начинает отображаться контент div с ID, указанным в href:
Как настроить фон и окно?
В поле «Автоматическое определение» можно выбрать те форматы файлов, которые будут открываться в FancyBox автоматически.
Настроить анимацию при открытии/закрытии можно в разделе «Поведение». Чтобы перелистывать изображения с использованием мышки поставьте галочку «Включить скрипт для Mousewheel jQuery».
Как настроить PDF?
Данная настройка Fancybox будет отображаться только, если он активирован для PDF:
PDF-документ будет отображаться в плагине, после того как будет установлена галочка «Автоматическое определение» и в ссылке на файл дописано «fancybox-pdf»:
Все, что теперь требуется, – разместить на сайте ссылку на PDF-файл.
Как настроить видео с YouTube?
При нажатии на ссылку на видеоролик с YouTube он будет отображаться во всплывающем окне.
Что делать если не работает Fancybox for WordPress?
Вы настроили плагин и внесли все изменения, а результата нет? Это не означает, что не работает Fancybox for WordPress. Все, что от вас требуется — очистить кэш или и вовсе выключить его на время правок.
В случае возникновения ошибки «TypeError:$ is not a function», решить проблему поможет замена $ на jQuery.
Секреты работы с Fancybox:
- Если уже имеется встроенный лайтбокс, это может спровоцировать конфликт с Fancybox. В таком случае следует в настройках плагина в разделе «Медиа» снять галочку с поля «Изображения» и сохранить изменения;
- Не рекомендуется подключать плагин в теме Chameleon, так как некоторые особенности темы начинают работать некорректно. Тем более, что тема Chameleon уже имеет свой лайтбокс;
- Если в настройках в разделе «Ссылка» выбран «Медиафайл», то в момент нажатия на изображение одновременно откроется и картинка в Fancybox, и галерея. Избежать этого можно, если установить значение «Страница вложения»;
- Предотвратить опускание картинок вниз в момент прокрутки страницы можно, если убрать галочку в разделе Behaviour (Поведение) с позиции Center on Scroll.
Установив и корректно настроив Fancybox, вы сможете быстро и легко создавать красивые галереи и успешные проекты.
www.internet-technologies.ru
Простая галерея:
Галерея + сортировка
Модальное окно:
Видео:
В своих проектах я часто использую FancyBox, но я пользовался второй версией, теперь перехожу на третью и Вам советую
Скачать Скачать
www.y-ea.ru
FancyBox — это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.
Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css
Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:
<script type="text/javascript"> $(document).ready(function() {
$("a.gallery").fancybox();
});
</script>
Таким образом на все ссылки с классом gallery мы повесили fancybox с параметрами по умолчанию. Теперь напишем простой HTML для фотогалереи:
<div id="wrap">
<h1>FancyBox - Фотогалерея</h1>
<h3>Одиночная картинка</h3>
<a class="gallery" title="Одиночная картинка" href="images/1_b.jpg"><img src="images/1_s.jpg" /></a>
<h3>Группа картинок (галерея изображений)</h3>
<a class="gallery" rel="group" title="это фото 1" href="images/2_b.jpg"><img src="images/2_s.jpg" /></a>
<a class="gallery" rel="group" title="это фото 2" href="images/3_b.jpg"><img src="images/3_s.jpg" /></a>
<a class="gallery" rel="group" href="images/4_b.jpg"><img src="images/4_s.jpg" /></a>
Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class=»gallery») и атрибут rel (в примере rel=»group»). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.
Теперь давайте рассмотрим параметры, которые мы можем задать при вызове fancybox, которые влияют на внешний вид и поведение фотогалереи. Для нашего эксперимента создадим аналогичный HTML- код (пример приводить не буду, он абсолютно идентичен приведенному выше) с той лишь разницей, что всем тегам <a> присвоим класс gallery2, и напишем для него следующую функцию (которую также поместим м/у тегами head):
$("a.gallery2").fancybox(
{
"padding" : 20,
"imageScale" : false,
"zoomOpacity" : false,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000,
"frameWidth" : 700,
"frameHeight" : 600,
"overlayShow" : true,
"overlayOpacity" : 0.8,
"hideOnContentClick" :false,
"centerOnScroll" : false
});
Что все это значит:
padding — отступ контента (фотографий) от краев окна. В демке я поставил 20px, это, конечно, многовато, но зато наглядно;
imageScale — принимает значение true — контент(изображения) масштабируется по размеру окна, или false — окно вытягивается по размеру контента. По умолчанию — true;
zoomOpacity — изменение прозрачности контента во время анимации (по умолчанию false). Помним, что прозрачность задается от 0 до 1;
zoomSpeedIn — скорость анимации в мс при увеличении фото (по умолчанию 0);
zoomSpeedOut — скорость анимации в мс при уменьшении фото (по умолчанию 0) ;
zoomSpeedChange — скорость анимации в мс при смене фото (по умолчанию 0);
frameWidth — ширина окна, px (425px — по умолчанию);
frameHeight — высота окна, px(355px — по умолчанию);
overlayShow — (по умолчанию true) если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css — div#fancy_overlay
overlayOpacity — Прозрачность затемнения (0.3 по умолчанию);
hideOnContentClick — Если true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
centerOnScroll — Если true, то окно центрируется на экране, когда пользователь прокручивает страницу.
Как мы видим в наших руках весьма гибкий инструмент для создания фотогалерей и не только…
Но не галереями един этот замечательный плагин. С помощью fancybox мы легко можем выводить не только фотографии в красивых окошках, но и другой контент.
Видео с Youtube (rutube, video.mail и т.д.)
<h3>Видео с youtube.com в модальном окне</h3>
<a class="gallery" href="#testube"><img alt="" src="images/atb_s.jpg" /></a>
<div style="display:none" id="testube">
<!-- HTML - код ролика -->
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/sh08XGBE8qc&hl=ru&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sh08XGBE8qc&hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> <!-- конец HTML - кода ролика -->
</div>Все очень просто. Мы в теге <a> указали класс gallery, в атрибуте href идентификатор #testube. В контейнер div#testube поместили код ролика с youtube.
Еще проще реализуется открытие ссылки (сайта) в модальном окне:
<a class="iframe" href="http://www.google.ru">Погуглим?</a> Правда здесь есть одно «но». Класс обязательно должен иметь имя iframe. Соответственно на этот класс нам нужно повесить fancybox
$("a.iframe").fancybox(
{
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
}); Модальные окна с собственным контентом:
Реализуется аналогично с предыдущим примером:
<a class="gallery2" title="Простая HTML" href="content.html">Клик</a> Файл content.html содержит htm-код, который и будет выведен в модальное окно. Обратите внимание, что сам файл content.html не содержит в себе ни css-стилей , ни ссылок на них. На демонстрационной страничке между тэгами head я создал класс .green и текст в модальном окне (заключенный в <p class=’green’> ) получился зеленый.
Мы также в атрибуте href можем указать и php. Давайте реализуем это. Для этого создадим простой php-файл content2.php:
<h2>Вы открыли окно № <?php echo $_GET["id"] ?></h2> А на странице с нашими примерами напишем:
<h3>Свой контент в модальном окне вариант 2.</h3>
<a href="content2.php?id=1" class="gallery">Первое окно</a><br>
<a href="content2.php?id=2" class="gallery">Второе окно</a><br> Мы видим, что ссылки имеют GET — параметр, и в соответствии с цифрой в этом параметре content2.php может производить какие-либо действия.Таким образом в модальном окне может выводиться контент из базы данных, можно реализовать форму обратной связи и т.д. и т.п.
Теперь об одном большом нюансе, касательно вывода своего контента в модальных окнах.
Т.к. поисковики не понимают яваскриптов , для них наши модальные окна — просто новая страница. Нам следует подстраховаться, дабы ни один поисковик никому не дал прямую ссылку на такую страницу, но в тоже время контент модальных окон смог нормально проиндексировать.
Можно сделать так :
<h3>Свой контент в модальном окне вариант 2 с дублированием.</h3>
<a href="for_spider.php?id=1" class="modalbox">Первое окно</a><br>
<a href="for_spider.php?id=2" class="modalbox">Второе окно</a><br> Где for_spider.php — это нормальная страница сайта, с подключенными стилями, скриптами. На этой странице мы будем выводить тот же самый контент, что и в модальном окне. Пускай ее и будут индексировать поисковики и на нее же попадают неадекватные посетители с отключенным javascript. . А для нормальных людей мы сделаем подмену. С помощью jquery мы заменим for_spider.php на content2.php. Между тегами head, после «$(document).ready(function() {» напишем следующий код:
url = $("a.modalbox").attr('href').replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"frameWidth" : 400,
"frameHeight" : 400
}); Что мы здесь делаем. У тегов <a class=’modalbox’> мы «вытаскиваем» ссылку, заменяем в ней «for_spider» на «content2» и заносим в переменную url. Затем у этих же тегов мы заменяем атрибут href на новый(значение переменной url). Ну потом уже привычый нам запуск плагина fancybox. Как только на наш сайт зайдет посетитель, все ссылки на for_spider.php преобразуются в content2.php — на наши модальные окна.
На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!
ruseller.com
Создание модальных окон довольно востребованная необходимость, которая может на практике возникать повсеместно для разных целей, будь то простое информационное сообщение, форма ввода, или что-либо ещё. К счастью уже есть готовые наработки других программистов, которыми можно воспользоваться и тем самым сэкономить своё время для других задач. Сейчас мы поговорим о том, как можно воспользоваться библиотекой Jquery а так же fancybox для создания модального окна.
Качаем архив с файлами, далее рассмотрим, как можно прикрутить всё это дело в своём проекте. Распакуйте архив, разместите файлы в директорию вашего шаблона, далее подключаем в необходимые файлы в head-заголовке страницы:
<!--подкючаем jquery--> <script type="text/javascript" src="fancybox/jquery.min.js"></script> <!--подкючаем fancybox--> <link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css"> <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
Теперь непосредственно к самой форме. Форма может быть абсолютно произвольная, с набором ваших полей, либо других данных, это не принципиально, ключевой момент тут в том, что всё это дело мы заключаем в блок, и присваиваем ему атрибут id, в моем случае это feedback. В стилях для этого блока устанавливаем значение display:none, чтобы на самой странице форма не показывалась.
<style type="text/css"> #feedback {display:none;} </style> <div id="feedback"><!-- hidden inline form --> <h2>Отправка сообщения</h2> <form id="f_contact" name="contact" action="#" method="post"> <label for="f_name">Ваше имя</label><br> <input type="text" id="f_name" name="f_name"><br> <label for="f_email">Ваш E-mail</label><br> <input type="text" id="f_email" name="f_email"><br> <label for="f_msg">Введите сообщение</label><br> <textarea id="f_msg" name="f_msg" class="txtarea"></textarea> <button id="f_send">Отправить E-mail</button> </form> </div>
Теперь нам нужна ссылка, по нажатию на которой должно всплывать модальное окно с нашей формой, собственно выгладить будет так:
<a href="#feedback" rel="nofollow" class="modalbox">Обратная связь</a>
Обратите внимание на атрибуты ссылки, в href указан id формы, а так же класс modalbox, который так же будет использован для инициализации всплывающего окна.
Теперь сам код javascript, который и занимается тем, что показывает форму, и обрабатывает. Обработку формы вы так же делаете под себя.
<script type="text/javascript"> $(document).ready(function(){ $(".modalbox").fancybox(); $("#f_contact").submit(function(){ return false; }); $("#f_send").on("click", function(){ // тут дальнейшие действия по обработке формы // закрываем окно, как правило делать это нужно после обработки данных $("#f_contact").fadeOut("fast", function(){ $(this).before("<p><strong>Ваше сообщение отправлено!</strong></p>"); setTimeout("$.fancybox.close()", 1000); }); }); }); </script>
Подобным образом можно сделать любое модальное окно, с произвольными полями, и другими данными, который вы заключаете в блоке. Задавайте вопросы, постараюсь помочь.
Вот пример как окно работает.
yournet.kz
You can pass these options as key/value object to fancybox() method. It is also possible to modify defaults directly at fancyBox JS file or $.fancybox.defaults
| Name | Description |
|---|---|
| padding | Space inside fancyBox around content. Can be set as array — [top, right, bottom, left]. Integer, Array; Default value: 15 |
| margin | Minimum space between viewport and fancyBox. Can be set as array — [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport Integer, Array; Default value: 20 |
| width | Default width for ‘iframe’ and ‘swf’ content. Also for ‘inline’, ‘ajax’ and ‘html’ if ‘autoSize’ is set to ‘false’. Can be numeric or ‘auto’. Number, String; Default value: 800 |
| height | Default height for ‘iframe’ and ‘swf’ content. Also for ‘inline’, ‘ajax’ and ‘html’ if ‘autoSize’ is set to ‘false’. Can be numeric or ‘auto’ Number, String; Default value: 600 |
| minWidth | Minimum width fancyBox should be allowed to resize to Number; Default value: 100 |
| minHeight | Minimum height fancyBox should be allowed to resize to Number; Default value: 100 |
| maxWidth | Maximum width fancyBox should be allowed to resize to Number; Default value: 9999 |
| maxHeight | Maximum height fancyBox should be allowed to resize to Number; Default value: 9999 |
| autoSize | If true, then sets both autoHeight and autoWidth to true Boolean; Default value: true |
| autoHeight | If set to true, for ‘inline’, ‘ajax’ and ‘html’ type content height is auto determined. If no dimensions set this may give unexpected results Boolean; Default value: false |
| autoWidth | If set to true, for ‘inline’, ‘ajax’ and ‘html’ type content width is auto determined. If no dimensions set this may give unexpected results Boolean; Default value: false |
| autoResize | If set to true, the content will be resized after window resize event Boolean; Default value: !isTouch |
| autoCenter | If set to true, the content will always be centered Boolean; Default value: !isTouch |
| fitToView | If set to true, fancyBox is resized to fit inside viewport before opening Boolean; Default value: true |
| aspectRatio | If set to true, resizing is constrained by the original aspect ratio (images always keep ratio; see this example — if you want to change ratio for other media) Boolean; Default value: false |
| topRatio | Top space ratio for vertical centering. If set to 0.5, then vertical and bottom space will be equal. If 0 — fancyBox will be at the viewport top Number; Default value: 0.5 |
| leftRatio | Left space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 — fancyBox will be at the viewport left Number; Default value: 0.5 |
| scrolling | Set the overflow CSS property to create or hide scrollbars. Can be set to ‘auto’, ‘yes’, ‘no’ or ‘visible’ String; Default value: ‘auto’ |
| wrapCSS | Customizable CSS class for wrapping element (useful for custom styling) string; Default value: |
| arrows | If set to true, navigation arrows will be displayed Boolean; Default value: true |
| closeBtn | If set to true, close button will be displayed Boolean; Default value: true |
| closeClick | If set to true, fancyBox will be closed when user clicks the content Boolean; Default value: false |
| nextClick | If set to true, will navigate to next gallery item when user clicks the content Boolean; Default value: false |
| mouseWheel | If set to true, you will be able to navigate gallery using the mouse wheel Boolean; Default value: true |
| autoPlay | If set to true, slideshow will start after opening the first gallery item Boolean; Default value: false |
| playSpeed | Slideshow speed in milliseconds Integer; Default value: 3000 |
| preload | Number of gallery images to preload Integer; Default value: 3 |
| modal | If set to true, will disable navigation and closing Boolean; Default value: false |
| loop | If set to true, enables cyclic navigation. This means, if you click «next» after you reach the last element, first element will be displayed (and vice versa). Boolean; Default value: true |
| ajax | Options for ajax request Object; Default value: { dataType : 'html', headers : { 'X-fancyBox': true } }
|
| iframe | Options for content type «iframe» Object; Default value: { scrolling : 'auto', preload : true }
|
| swf | Options for content type «swf» Object; Default value: { wmode: 'transparent', allowfullscreen : 'true', allowscriptaccess : 'always' }
|
| keys | Define keyboard keys for gallery navigation, closing and slideshow Object; Default value: { next : { 13 : 'left', // enter 34 : 'up', // page down 39 : 'left', // right arrow 40 : 'up' // down arrow }, prev : { 8 : 'right', // backspace 33 : 'down', // page up 37 : 'right', // left arrow 38 : 'down' // up arrow }, close : [27], // escape key play : [32], // space - start/stop slideshow toggle : [70] // letter "f" - toggle fullscreen }
|
| direction | Default navigation direction (for navigation arrows, too) Object; Default value: { { next : 'left', prev : 'right' } }
|
| scrollOutside | If true, the script will try to avoid horizontal scrolling for iframes and html content Boolean; Default value: true |
| index | Overrides group start index Integer; Default value: 0 |
| type | Overrides type for content. Supported types are ‘image’, ‘inline’, ‘ajax’, ‘iframe’, ‘swf’ and ‘html’ String; Default value: null |
| href | Overrides content source link String; Default value: null |
| content | Overrides content to be displayed String; Default value: null |
| title | Overrides title content, accepts any HTML String; Default value: null |
| tpl | Object containing various templates Object; Default value: { wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>', image : '<img class="fancybox-image" src="{href}" alt="" />', iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>', error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>', closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>', next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>', prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>' }
|
| openEffect / closeEffect / nextEffect / prevEffect | Animation effect (‘elastic’, ‘fade’ or ‘none’) for each transition type String; Default value: ‘fade’, ‘fade’, ‘elastic’, ‘elastic’ |
| openSpeed / closeSpeed / nextSpeed / prevSpeed | The time it takes (in ms, or «slow», «normal», «fast») to complete transition Integer; Default value: 250 |
| openEasing / closeEasing / nextEasing / prevEasing | Easing method for each transition type. You have numerous choices if easing plugin is included String; Default value: ‘swing’ |
| openOpacity / closeOpacity | If set to true, transparency is changed for elastic transitions Boolean; Default value: true |
| openMethod / closeMethod / nextMethod / prevMethod | Method from $.fancybox.transitions() that handles transition (you can add custom effects there) String; Default value: ‘zoomIn’ / ‘zoomOut’ / ‘changeIn’ / ‘changeOut’ |
| helpers | Object containing enabled helpers and options for each of them Object; Default value: { overlay : { closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay speedOut : 200, // duration of fadeOut animation showEarly : true, // indicates if should be opened immediately or wait until the content is ready css : {}, // custom CSS properties locked : true // if true, the content will be locked into overlay }, title : { type : 'float' // 'float', 'inside', 'outside' or 'over' } }
|
| live | If set to true, fancyBox uses «live» to assign click event. Set to «false», if you need to apply only to current collection, e.g., if using something like —
$("#page").children().filter('a').eq(0).fancybox();
Boolean; Default value: true |
| parent | Parent element of the container. This is useful for ASP.NET where the top element is «form» —
$(".fancybox").fancybox({ parent: "form:first" // jQuery selector });
String; Default value: body |
fancyapps.com
На многих сайта установлены увеличилки картинок. При нажатии на миниатюру, оригинальное изображение открывается с затемнением экрана в этом же окне. Но плагин fancybox 3 позволяет организовать не только это, но и модальные окна с открытием любого контента (где вы можете вставить свой контент, произвольный сайт, PDF файл или видео с YouTube)!
Fancybox 3 устанавливается очень просто — достаточно подключить всего 2 файла (которые вы найдете в скачанном архиве): jquery.fancybox.js и jquery.fancybox.css.
Увеличика картинок
<a href=»оригинальная_картинка» data-fancybox data-caption=»Заголовок»><img src=»миниатюра_картинки» /></a>
Чтобы любая картинка увеличивалась на вашем сайте, добавьте к ней ссылку, в href которой будет ссылка на оригинал. Но никто вам не запрещает использовать оригинал в ссылке и самой картинке.
data-fancybox — означает, что к этой ссылке будет применен плагин fancybox
data-caption — заголовок картинки во всплывайке (вместо него можно использовать title=»» на ссылке)
Если вам нужно, чтобы fancybox запускался по идентификатору, то уберите в ссылке data-fancybox и инициализируйте плагин по вашему идентификатору:
<a href=»оригинальная_картинка» class=»mysuperimg» data-caption=»Заголовок»><img src=»миниатюра_картинки» /></a>
<script type=»text/javascript»>
$(document).ready(function() {
$(«.mysuperimg»).fancybox({ }); });
</script>
Галерея на Fancybox 3
Все тоже самое, как и с увеличилкой, только вам нужно будет добавить к каждой ссылке одинаковый атрибут: data-fancybox=»example_group», где example_group будет означать, что эти картинки связаны. При нажатии на любую из них во всплывайке появятся стрелки, возможность слайдшоу миниатюры и т.п.
<a href=»оригинальная_картинка» data-fancybox=»example_group»><img src=»миниатюра_картинки» /></a>
<a href=»оригинальная_картинка» data-fancybox=»example_group»><img src=»миниатюра_картинки»/></a>
Произвольный текст во всплывайке
Очень легко можно создать неограниченное количество всплываек, для этого будем использовать data-src, в котором передаем идентификатор html блока, который надо отобразить:
<a data-fancybox data-src=»#hidden-content» href=»javascript:;»>Показать текст</a>
<div style=»display: none;» id=»hidden-content»><h2>Привет!</h2><p>Это произвольный текст!</p></div>
В этом примере мы изначально скрыли блок #hidden-content, а при нажатии на ссылку грузим его во всплывайку.
Iframe загрузка любой страницы
Fancybox 3 позволяет грузить любой сайт (если у него нет от этого защиты) в модальное окно! Более того если вы грузите свой собственный сайт, то немного пошаманив можно загружать только определенную его часть, например, какой-нибудь опрос или корзину товаров.
<a data-fancybox data-src=»http://сайт.ру/» href=»javascript:;»>Сайт в Iframe окне</a>
Кстати заметил интересную особенность, если у вас много сайтов, которые должны открываться в виде галереи, то ничего вам не мешает использовать группировку с помощью data-fancybox=»example_sait».(в модальном окне сайты буду листаться друг за другом) Пример:
<a class=»myframe» data-fancybox=»example_sait» data-src=»http://сайт1.ру/» href=»javascript:;»>Сайт1 в Iframe окне</a>
<a class=»myframe» data-fancybox=»example_sait» data-src=»http://сайт2.ру/» href=»javascript:;»>Сайт2 в Iframe окне</a>
Чтобы Iframe был с прокруткой, его нужно инициализировать и добавить параметр прокрутки (для предыдущего примера — теперь сайты будут с прокруткой):
<script type=»text/javascript»>
$(document).ready(function() {
$(«.myframe»).fancybox({ iframe : { scrolling : ‘yes’, }, });
});
</script>
Разные форматы YouTube, PDF, карты (запускается на http)
<a data-fancybox data-src=»http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf» href=»javascript:;»>PDF файл</a>
<a data-fancybox href=»https://www.youtube.com/watch?v=_sI_Ps7JSEk»>YouTube видео</a>
<a data-fancybox href=»https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&showinfo=0″>YouTube видео с параметрами</a>
<a data-fancybox href=»https://vimeo.com/191947042″>Vimeo видео</a>
<a data-fancybox href=»https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572″>Google карта</a>
На этом основной функционал Fancybox 3 закончен. Вы можете прочитать о дополнительных возможностях плагина.
blogjquery.ru
От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас еще один плагин, реализующий эффект а-ля Lightbox – это плагин fancyBox. Очень мощный и удобный плагин модальных окон для контента, мимо которого пройти просто невозможно.
Итак, давайте рассмотрим примеры работы с плагином fancyBox – одним из лучших в своем роде и, пожалуй, моим самым любимым плагином лайтбокс, поскольку его я использую практически в каждом своем проекте.
Официальный сайт fancyBox предлагает нам отличную документацию со множеством примеров, которые показывают, как открывать в модальном окне лайбокс различные варианты контента: одиночное фото, группу изображений, видео, флеш, фрейм, Google карты, подгружать контент с помощью AJAX и т.д. Как видим, плагин действительно мощный.
Скачаем актуальную версию fancyBox (версия 2.1.5 на момент написания статьи) и подключим его файлы.
Это обязательные файлы, остальные файлы плагина являются опциональными. Теперь давайте добавим лайтбокс эффект для одиночной картинки. Разметка может быть примерно такой:
Для ссылки на оригинальное (большое) изображение мы установили класс fancybox, по которому и будем формировать коллекцию jQuery и вызывать метод fancybox используемого плагина. Теперь давайте вызовем нужный метод:
Теперь при клике по миниатюре в модальном окне будет показано оригинальное изображение. При этом появление изображение будет сопровождаться приятной анимацией.
Также fancyBox позволяет группировать картинки, создавая галереи, для этого достаточно добавить группируемым картинкам атрибут rel с одинаковым значением. Давайте добавим еще несколько изображений и объединим их в группу.
Теперь при открытии любой картинки мы будем видеть стрелки влево и вправо, которые позволяют переключаться между изображениями.
Кстати, существенным плюсом fancyBox является его адаптивность. Можете попробовать ресайзить окно браузера – плагин будет автоматически подстраиваться под размеры окна.
Для каждой картинки можно добавлять подпись, которая будет показана под изображением. Делается это через атрибут title для ссылки:
Ну и, конечно же, плагин предлагает нам множество опций, используя которые, мы можем настраивать fancyBox под себя: менять эффект анимации, оформление, события и другое.
На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
webformyself.com