С первого взгляда jQuery плагин FancyBox очень напоминает . Но у него есть несколько фишек, которые делают эту галерею достойной отдельной статьи.
Достоинства- Может отображать изображения, HTML-элементы, SWF-ролики, а также и результаты Ajax запросов.
- Пользовательская настройка с помощью параметров и через .
- Можно группировать несколько элементов и добавлять им навигацию.
- Если подключить плагин jquery.mousewheel, то FancyBox будет также реагировать на события колеса мыши.
- Поддержка разнообразных анимированных переходов, используя плагин jquery.easing.
С помощью этого плагина можно одинаково легко выводить в отдельном окошке увеличенную картинку при клике на уменьшенном изображении, организовать галерею слайдов с навигацией и просто вывести попап окошко. Эти три типичных задачи показаны в нашем .
Проверено в:
- IE 6-8
- Firefox 4
- Opera 11
- Safari 4
- Chrome
- библиотеку jquery качаем или .
- (29.4 Kb) — сам плагин или его сжатая версия — (15.62 Kb).
- (6.72 Kb) (не обязательно) для переходов.
- (1.23 Kb) (не обязательно) поддержка колесика мыши.
- (9.23 Kb) стили для галереи.
- (34 Kb) картинки.
Подключаем библиотеки и таблицу стилей:
HTML очень правильный — маленькая картинка внутри ссылки на большую:
Если скрипты отключены, то при клике на ссылку просто откроется большая картинка. А если не отключены, то большая картинка откроется не просто, а в красивом, подстраивающемся под размер, отцентрированном окошке с тенькой. Да еще кнопочка «закрыть» будет. Да еще можно подпись из выводить. И много других приятностей есть. Красота да и только!
Для того, чтобы это все отработало, инициализируем галерею:
jQuery(document).ready(function() { jQuery("a").fancybox(); });
Конечно, в боевых условиях так огульно на все ссылки вешать плагин не стоит. Это я для примера показал. Лучше выбрать конкретные ссылки по классу, или, например, по родителю.
А теперь подробнееПлагин очень гибко настраивается с помощью параметров и вызовов методов:
Доступные опции fancybox()| Пространство между контейнером FancyBox и контентом. | integer | 10 |
| Пространство между областью просмотра и контейнером FancyBox. | integer | 20 |
| Если true, прозрачность контента меняется. | boolean | false |
| Если true, для "overlayShow" присваивается значение "true", а для "hideOnOverlayClick", "hideOnContentClick", "enableEscapeButton", "showCloseButton" присваивается значение "false". | boolean | false |
| Если true, галерея будет циклической, позволяя использовать для нажатия кнопки next/back. | boolean | false |
| Передает значение для для создания или скрытия полосы прокрутки. Может быть передано "auto", "yes", или "no". | string | "auto" |
| Ширина для контента типов "iframe" и "swf". Также выставляет ширину для строчного контента, если "autoDimensions" имеет значение "false". | integer | 560 |
| Высота для контента типов "iframe" и "swf". Также выставляет высоту для строчного контента, если "autoDimensions" имеет значение "false". | integer | 340 |
| Если true, FancyBox масштабируется для заполнения области просмотра. | boolean | true |
| Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам. | boolean | true |
| Если true, FancyBox центрируется, когда страница прокручивается. | boolean | false |
| Опции Ajax. Заметка: "error" и "success" будут перезаписаны FancyBox. | function | { } |
| Параметры объекта swf. | function | {wmode: "transparent"} |
| Включает/ выключает закрытие FancyBox по клике на фоновое затемнение вокруг FancyBox. | boolean | true |
| Включает/ выключает закрытие FancyBox по клике на основном контенте. | boolean | false |
| Определяет, показывать ли фоновое затеменение вокруг FancyBox. | boolean | true |
| Прозрачность фонового затемнения. | 0-1 | 0.3 |
| Основной цвет фонового затемнения. | string | "#666" |
| Включает/ выключает отображение title | boolean | true |
| Позиционирование title. Может принимать значение "outside", "inside" или "over" | string | "outside" |
| Обратная функция для пользовательской настройки области title. Можно задать любой HTML — свой счетчик изображений или даже пользовательскую навигацию. | function | null |
| Тип переходов. Может быть установлен в "elastic", "fade" или "none". | string | "fade" |
| Скорость перехода fade и elastic, в милисекундах. | integer | 300 |
| Скорость изменения размеров при изменении элементов галереи в миллисекундах. | integer | 300 |
| Скорость проявления контента во время смены элементов галереи. | string | "fast" |
| Easing используемый для эластичных анимаций. | string | "swing" |
| Включает/ выключает показывание кноки закрытия. | boolean | true |
| Включает/ выключает показывание стрелок навигации. | boolean | true |
| Включает/ выключает закрытие FancyBox по нажатию но кнопке Esc. | boolean | true |
| Функция, вызываемая перед попыткой загрузить контент. | function | null |
| Функция, вызываемая после отмены загрузки. | function | null |
| Функция, вызываемая один раз при отображении содержимого. | function | null |
| Функция, вызываемая как раз перед закрытием. | function | null |
| Функция, вызываемая один раз перед закрытием FancyBox. | function | null |
| Показывает загрузку анимации |
| Скрывает загрузочную анимацию |
| Отображает следующий элемент галереи |
| Отображает предыдущий элемент галереи |
| Отображает элемент галереи с заданным индексом |
| Отменяет загрузку контента |
| Скрывает FancyBox (для iframe используйте parent.$.fancybox.close()); |
| Автоматически изменяет размеры FancyBox: высота изменяется, чтобы соответствовать высоте контента |
| Центрирует FancyBox в области просмотра |
$(document).ready(function() { $("a.group").fancybox({ "transitionIn" : "elastic", "transitionOut" : "elastic", "speedIn" : 600, "speedOut" : 200, "overlayShow" : false }); });
Разные варианты работы плагинаКроме простого увеличения картинки, плагин пожно использовать для мультимедиа:
Это покажет содержание элемента, который имеет id="data"
Это iframe
Это iframe
Это контент, который будет подгружаться с помощью ajax
Если нужно сгруппировать несколько элементов в галерею, нужно добавить им одинаковый :
Пример инициализации скрипта для галереи (атрибут title станет подписью картинки):
JQuery("a").fancybox({ "transitionIn" : "none", "transitionOut" : "none", "titlePosition" : "over", "titleFormat" : function(title, currentArray, currentIndex, currentOpts) { return "Image " + (currentIndex + 1) + " / " + currentArray.length + (title.length ? " " + title: "") + ""; } });
Желающих посмотреть этот код в живую еще раз отсылаю к .
Показ/скрытие title под наведению мышиJQuery("a").fancybox({ "titlePosition" : "over", "onComplete" : function() { jQuery("#fancybox-wrap").hover(function() { jQuery("#fancybox-title").show(); }, function() { jQuery("#fancybox-title").hide(); }); } });
Кастомизация titleFunction formatTitle(title, currentArray, currentIndex, currentOpts) { return "" + (title && title.length ? "" + title + "" : "") + "Картинка " + (currentIndex + 1) + " из " + currentArray.length + ""; } $("a").fancybox({ "showCloseButton" : false, "titlePosition" : "inside", "titleFormat" : formatTitle });
Рассмотрим то, как действует Fancybox на JQuery и узнаем, как его настраивать.
Это один интересный плагин, с помощью которого, при нажатии на фотографии они открываются на весь экран. Безграничные способности для того, чтобы создавать легкие, симпатичные и удобные проекты. При этом такой плагин имеет простую настройку и быстрое подключение. Для этого скачайте Fancybox JQuery и осуществите его подключение в , как это показано ниже.
Как отобразить картинку
Данный плагин обладает несколькими параметрами, с помощью которых можно отображать определенные элементы страниц. Рассмотрим, как можно настроить отображение картинки. Чтобы это сделать, пропишите следующий код:
Теперь в силу вступает сам плагин. Чтобы отобразить картинку, пропишем следующее.
В атрибуте href необходимо указать путь к картинке, а в теге прописывается превью.
Как реализовать галерею и отобразить группу изображений
Чтобы решить эту задачу, необходимо выполнить один простой шаг - добавить в тег специальный атрибут , где будет указано то или иное значение (обязательно уникальное) для отдельной группы изображений.
Также необходимо прописать параметры того, как будет отображаться картинка, к теге.
Итак, можно вести счет числа картинок, находящихся в определенной группе, а также отображать номер и заголовок изображения. Однако для этого необходимо его наличие в title вышеупомянутого тега .
Как отобразить контент
Плагин, который мы рассматриваем в данной статье, можно также использовать для того, чтобы в модальном окне отображать контент. Рассмотрим на примере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam.
По умолчанию display:none, то есть контент скрыт. Однако, когда кликают по ссылке, плагин отображает контент div с ID, который был указан в href. Также обратите внимание на .
Надеемся, что вы уловили общую суть. А об остальных возможностях плагина мы еще поговорим.
Более подробно о параметрах 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, он достаточно красивый, ознакомиться с ним вы сможете в статье -
FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.
Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css
Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:
$(document).ready(function() {
$("a.gallery").fancybox();
});
FancyBox - Фотогалерея
Одиночная картинка
Группа картинок (галерея изображений)
Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class="gallery") и атрибут rel (в примере rel="group"). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.
Теперь давайте рассмотрим параметры, которые мы можем задать при вызове fancybox, которые влияют на внешний вид и поведение фотогалереи. Для нашего эксперимента создадим аналогичный HTML- код (пример приводить не буду, он абсолютно идентичен приведенному выше) с той лишь разницей, что всем тегам присвоим класс 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 и т.д.)
Видео с youtube.com в модальном окне
Все очень просто. Мы в теге указали класс gallery, в атрибуте href идентификатор #testube . В контейнер div#testube поместили код ролика с youtube.
Погуглим?
Правда здесь есть одно "но". Класс обязательно должен иметь имя iframe . Соответственно на этот класс нам нужно повесить fancybox
$("a.iframe").fancybox(
{
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
});
Модальные окна с собственным контентом:
Реализуется аналогично с предыдущим примером:
Клик
Файл content.html содержит htm-код, который и будет выведен в модальное окно. Обратите внимание, что сам файл content.html не содержит в себе ни css-стилей, ни ссылок на них. На демонстрационной страничке между тэгами head я создал класс.green и текст в модальном окне (заключенный в
) получился зеленый.
Мы также в атрибуте href можем указать и php. Давайте реализуем это. Для этого создадим простой php-файл content2.php:
Вы открыли окно №
А на странице с нашими примерами напишем:
Свой контент в модальном окне вариант 2.
Первое окно
Второе окно
Мы видим, что ссылки имеют GET - параметр, и в соответствии с цифрой в этом параметре content2.php может производить какие-либо действия.Таким образом в модальном окне может выводиться контент из базы данных, можно реализовать форму обратной связи и т.д. и т.п.
Теперь об одном большом нюансе
, касательно вывода своего контента в модальных окнах.
Т.к. поисковики не понимают яваскриптов, для них наши модальные окна - просто новая страница. Нам следует подстраховаться, дабы ни один поисковик никому не дал прямую ссылку на такую страницу, но в тоже время контент модальных окон смог нормально проиндексировать.
Можно сделать так:
Свой контент в модальном окне вариант 2 с дублированием.
Первое окно
Второе окно
Где 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
На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!
Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)Создать красивую галерею ваших фотографий с возможностью просмотра во всплывающем окне - дело не сложное, если использовать jQuery плагин FancyBox.
Изложим план действий по созданию галереи:
1. Скачать архив плагина.
2. Создадим простую структуру галереи.
3. Подключим скрипты и стили плагина к нашей страничке с галереей.
4. Сделаем маленький скрипт, в котором привяжем наши картинки в одну галерею FancyBox.
Тут я думаю проблем не будет, переходим по ссылке:
Жмем на кнопу показанную на картинке и архив с плагином, будет скачан к вам на комп.
Наша структура будет состоят из картинок завернутых в ссылки:
где class="fancybox"
- единый класс для всех ссылок, по нему мы будем делать jquery выборку,
rel="gallery"
в этом атрибуте указываем одинаковое название, т.к. по нему будут группироваться изображения в одну галерею при просмотре.
Вот полный HTML-код галереи из 4 картинок
Тут я решил подключить минимум необходимых стилей и скриптов,
разумеется подключаем jquery библиотеку, стили и скрипты плагина fancybox и стили и скрипты для демо-примера (в вашем случае файл стилей и скриптом вашего сайта).
Содержимое файла script.js , в нем мы указываем класс селектора к которому подключаем jquery галерею fancybox:
$(document).ready(function() { $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); });
В файле стилей для нашей демо галереи будет несколько строк:
A {text-decoration: none;} .fancybox img { margin-bottom: 4px; max-width: 200px; max-height: 100px; }