FancyBox — галерея и модальное окно

Подготовил: Александр Головко Дата публикации: 29.07.2011

С первого взгляда jQuery плагин FancyBox очень напоминает LightBox. Но у него есть несколько фишек, которые делают эту галерею достойной отдельной статьи.

Достоинства

  • Может отображать изображения, HTML-элементы, SWF-ролики, а также iframe и результаты Ajax запросов.
  • Пользовательская настройка с помощью параметров и через CSS.
  • Можно группировать несколько элементов и добавлять им навигацию.
  • Если подключить плагин jquery.mousewheel, то FancyBox будет также реагировать на события колеса мыши.
  • Поддержка разнообразных анимированных переходов, используя плагин jquery.easing.

С помощью этого плагина можно одинаково легко выводить в отдельном окошке увеличенную картинку при клике на уменьшенном изображении, организовать галерею слайдов с навигацией и просто вывести попап окошко. Эти три типичных задачи показаны в нашем демо-примере.

Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari 4
  • Chrome

Что качать?

Быстрый старт

Подключаем библиотеки и таблицу стилей:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

HTML очень правильный — маленькая картинка внутри ссылки на большую:

<a href="image_big.jpg"><img src="image_small.jpg" width="100" height="100" alt=""/></a>

Если скрипты отключены, то при клике на ссылку просто откроется большая картинка. А если не отключены, то большая картинка откроется не просто, а в красивом, подстраивающемся под размер, отцентрированном окошке с тенькой. Да еще кнопочка «закрыть» будет. Да еще можно подпись из title выводить. И много других приятностей есть. Красота да и только!

Для того, чтобы это все отработало, инициализируем галерею:

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery("a").fancybox();
	});
</script>

Конечно, в боевых условиях так огульно на все ссылки вешать плагин не стоит. Это я для примера показал. Лучше выбрать конкретные ссылки по классу, или, например, по родителю.

А теперь подробнее

Плагин очень гибко настраивается с помощью параметров и вызовов методов:

Доступные опции fancybox()

Название параметра Описание Тип значение по умолчанию
padding Пространство между контейнером FancyBox и контентом. integer 10
margin Пространство между областью просмотра и контейнером FancyBox. integer 20
opacity Если true, прозрачность контента меняется. boolean false
modal Если true, для 'overlayShow' присваивается значение 'true', а для 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' присваивается значение 'false'. boolean false
cyclic Если true, галерея будет циклической, позволяя использовать для нажатия кнопки next/back. boolean false
scrolling Передает значение для CSS свойства overflow для создания или скрытия полосы прокрутки. Может быть передано 'auto', 'yes', или 'no'. string 'auto'
width Ширина для контента типов 'iframe' и 'swf'. Также выставляет ширину для строчного контента, если 'autoDimensions' имеет значение 'false'. integer 560
height Высота для контента типов 'iframe' и 'swf'. Также выставляет высоту для строчного контента, если 'autoDimensions' имеет значение 'false'. integer 340
autoScale Если true, FancyBox масштабируется для заполнения области просмотра. boolean true
autoDimensions Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам. boolean true
centerOnScroll Если true, FancyBox центрируется, когда страница прокручивается. boolean false
ajax Опции Ajax. Заметка: 'error' и 'success' будут перезаписаны FancyBox. function { }
swf Параметры объекта swf. function {wmode: 'transparent'}
hideOnOverlayClick Включает/ выключает закрытие FancyBox по клике на фоновое затемнение вокруг FancyBox. boolean true
hideOnContentClick Включает/ выключает закрытие FancyBox по клике на основном контенте. boolean false
overlayShow Определяет, показывать ли фоновое затеменение вокруг FancyBox. boolean true
overlayOpacity Прозрачность фонового затемнения. 0-1 0.3
overlayColor Основной цвет фонового затемнения. string '#666'
titleShow Включает/ выключает отображение title boolean true
titlePosition Позиционирование title. Может принимать значение 'outside', 'inside' или 'over' string 'outside'
titleFormat Обратная функция для пользовательской настройки области title. Можно задать любой HTML — свой счетчик изображений или даже пользовательскую навигацию. function null
transitionIn, transitionOut Тип переходов. Может быть установлен в 'elastic', 'fade' или 'none'. string 'fade'
speedIn, speedOut Скорость перехода fade и elastic, в милисекундах. integer 300
changeSpeed Скорость изменения размеров при изменении элементов галереи в миллисекундах. integer 300
changeFade Скорость проявления контента во время смены элементов галереи. string 'fast'
easingIn, easingOut Easing используемый для эластичных анимаций. string 'swing'
showCloseButton Включает/ выключает показывание кноки закрытия. boolean true
showNavArrows Включает/ выключает показывание стрелок навигации. boolean true
enableEscapeButton Включает/ выключает закрытие FancyBox по нажатию но кнопке Esc. boolean true
onStart Функция, вызываемая перед попыткой загрузить контент. function null
onCancel Функция, вызываемая после отмены загрузки. function null
onComplete Функция, вызываемая один раз при отображении содержимого. function null
onCleanup Функция, вызываемая как раз перед закрытием. function null
onClosed Функция, вызываемая один раз перед закрытием FancyBox. function null

Продвинутые опции fancybox()

Название параметра Описание Тип значение по умолчанию
type Принудительно декларирует тип содержимого. Может быть задано 'image', 'ajax', 'iframe', 'swf' или 'inline'. string нет
href Принудительно задает источник контента. string нет
title Принудительно задает title. string нет
content Принудительно задает контент (могут быть любые html данные). string нет
orig Устанавливает объект чья позиция и размеры будут использоваться эластичным переходом. string нет
index Пользовательский индекс начала созданной вручную галереи. string нет

Общедоступные методы

Метод Описание
$.fancybox.showActivity Показывает загрузку анимации
$.fancybox.hideActivity Скрывает загрузочную анимацию
$.fancybox.next Отображает следующий элемент галереи
$.fancybox.prev Отображает предыдущий элемент галереи
$.fancybox.pos Отображает элемент галереи с заданным индексом
$.fancybox.cancel Отменяет загрузку контента
$.fancybox.close Скрывает FancyBox ( для iframe используйте parent.$.fancybox.close() );
$.fancybox.resize Автоматически изменяет размеры FancyBox: высота изменяется, чтобы соответствовать высоте контента
$.fancybox.center Центрирует FancyBox в области просмотра

Пример инициализации с параметрами

$(document).ready(function() {
	
	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
});

Разные варианты работы плагина

Кроме простого увеличения картинки, плагин пожно использовать для мультимедиа:

<a id="inline" href="#data">Это покажет содержание элемента, который имеет id="data"</a>

Для iframe:

<a href="http://www.mpbox.ru?iframe">Это iframe</a>

или

<a class="iframe" href="http://www.mpbox.ru/">Это iframe</a>

ajax:

<a href="http://www.mpbox.ru/data.php">Это контент, который будет подгружаться с помощью ajax</a>

Если нужно сгруппировать несколько элементов в галерею, нужно добавить им одинаковый rel:

<a id="single_image" rel="group" href="image1.jpg"><img src="image1small.jpg" alt=""/></a>
<a id="single_image" rel="group" href="image2.jpg"><img src="image2small.jpg" alt=""/></a>
<a id="single_image" rel="group" href="image3.jpg"><img src="image3small.jpg" alt=""/></a>
<a id="single_image" rel="group" href="image4.jpg"><img src="image4small.jpg" alt=""/></a>

Пример инициализации скрипта для галереи (атрибут title станет подписью картинки):

jQuery("a[rel=group]").fancybox({
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'titlePosition' 	: 'over',
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
				}
});

Желающих посмотреть этот код в живую еще раз отсылаю к демо-примеру.

Показ/скрытие title под наведению мыши

jQuery("a").fancybox({
	'titlePosition'	:	'over',
	'onComplete'	:	function() {
		jQuery("#fancybox-wrap").hover(function() {
			jQuery("#fancybox-title").show();
		}, function() {
			jQuery("#fancybox-title").hide();
		});
	}
});

Кастомизация title

function formatTitle(title, currentArray, currentIndex, currentOpts) {
     return '<div id="tip-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Картинка ' + (currentIndex + 1) + ' из ' + currentArray.length + '</div>';
}

$("a").fancybox({
	'showCloseButton'	: false,
	'titlePosition' 	: 'inside',
	'titleFormat'		: formatTitle
});
#tip-title { 
	text-align: left; 
}
#tip-title b {
	display: block;
	margin-right: 80px;
}
#tip-title span { 
	float: right; 
}

Выборочная инициализация

Применяем скрипт только к тем ссылкам, внутри которых есть рисунок:

jQuery("a:has(img)").fancybox();
jQuery("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

Другой вариант — применяем к тем ссылкам href которых оканчивается на нужные расширения (jpg, png, gif):

jQuery("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

Вывод

Крепкий конкурент lightBox. Хотя использовать его, например, чисто для создания попап окошка не представляется разумным. Уж очень много всего подключить нужно. Да и вес немалый. Соответственно рекомендую использовать в случаях, когда действительно нужна такая мощь, которую плагин может предоставить.

Материал

  • fancybox.net — официальный сайт плагина.
Показать комментарии