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

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

Достоинства

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

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

Проверено в:

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

Что качать?

• библиотеку jquery docs.jquery.com/Downloading_jQuery или подключаем из хранилища.
• jquery.fancybox-1.3.4.js (29.4 Kb) — сам плагин или его сжатая версия — jquery.fancybox-1.3.4.pack.js (15.62 Kb).
• jquery.easing-1.4.pack.js (6.72 Kb) (не обязательно) для переходов.
• jquery.mousewheel-3.0.4.pack.js (1.23 Kb) (не обязательно) поддержка колесика мыши.
• jquery.fancybox-1.3.4.css (9.23 Kb) стили для галереи.

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

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

<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()

Продвинутые опции 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 rel="group" href="image1.jpg"><img src="image1small.jpg" alt=""/></a>
<a rel="group" href="image2.jpg"><img src="image2small.jpg" alt=""/></a>
<a rel="group" href="image3.jpg"><img src="image3small.jpg" alt=""/></a>
<a 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 — официальный сайт плагина.