Палитра тишины…

На днях накопал весьма интересный для меня плагин для фреймворка jQuery, реализующий качественный и легко-настраиваемый “lightbox” с возможностью “связывания” картинок в единую галерею и прокрутки этой галереи при помощи колёсика мышки, а так же реализации фреймового модального окна для просмотра в нем простого текста, swf-анимации или другого сайта.

Основные возможности Fancybox

К основным преимуществам данного плагина относительно других примеров реализации эффекта “lightbox” на jQuery можно отнести:

• выбор одного из трех эффектов открытия и закрытия бокса с картинкой;
• возможность реализации мини-галереи изображений на странице;
• возможность применения колесика мыши при просмотре галереи;
• возможность вывода бокса в режиме наложения (overlay);
• применения плагина для отображения в боксе не только картинок, но и swf-анимаций и простого текста;
• использования режима iframe для открытия в боксе другого сайта.

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

Ознакомиться с различными примера использования можно Здесь.

How to use Fancybox

Итак, что нам потребуется для использования плагина. Для начала, необходимо скачать Архив с плагином, включающий в себя все необходимые библиотеки и файлы. После этого надо подключить к создаваемой странице 3 библиотеки с функциями, которые мы будем использовать:

<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./jquery.fancybox-1.3.2.js"></script>

Далее, “прикручиваем” файл с таблицами стилей нашего плагина:

<link rel="stylesheet" href="./jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

Теперь создаем на странице несколько объектов-картинок с классом, например, “lightbox” и несколько с параметром “rel=img_group” (для формирования галереи из отдельных картинок):

<a class="lightbox" title="Описание" href="img/1_b.jpg"><img alt="example1" src="img/1.jpg" /></a>
<a class="lightbox" title="Описание" href="img/2_b.jpg"><img alt="example2" src="img/2.jpg" /></a>

<a rel="img_group" class="lightbox" href="img/3_b.jpg" title="Описание"><img alt="" src="img/3.jpg" /></a>
<a rel="img_group" class="lightbox" href="img/4_b.jpg" title="Описание"><img alt="" src="img/4.jpg" /></a>

После этого создаем, собственно, сам javascript-сценарий, который и будет управлять обработкой наших картинок (чтобы было более-менее интересно, сразу зададим несколько немаловажных параметров, таких как “transitionIn” – для выбора эффекта открытия бокса или “titleFormat” – для установки формата вывода заголовка картинки:

<script type="text/javascript">
$(document).ready(function() {
	// Для отдельных картинок
	$("a.lightbox").fancybox({
		'opacity'		: true,
		'overlayShow'	: true,
		'transitionIn'	: 'elastic',
		'titlePosition'	: 'over',
		'overlayColor'		: '#000',
		'overlayOpacity'	: 0.5,
		'padding'			: 1,
	});
	// Для сформированной галереи
	$("a[rel=img_group]").fancybox({
		'opacity'		: true,
		'overlayShow'	: true,
		'transitionIn'	: 'elastic',
		'titlePosition'	: 'over',
		'overlayColor'		: '#000',
		'overlayOpacity'	: 0.5,
		'padding'			: 1,
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
		});
});
</script>

На этом основная работа закончена. Можно проверять сделанное. Кроме этого, в функцию fancybox мы можем передать еще много различных параметров, которые так или иначе повлияют на создаваемые данным плагином эффекты (некоторые интересные параметры сопровожу краткими комментариями):

...
padding : 10,	// отступ внутри бокса (поля)
margin : 40,	// внешний отступ
opacity : false,	// прозрачность (false, true)
modal : false,	// модальность (false, true)
cyclic : false,	// цикличность вывода изображения в галереи  (false, true)
scrolling : 'auto',	//  скроллинг ('auto', 'yes' илли 'no')
width : 560,	//
height : 340,	//
autoScale : true,	//
autoDimensions : true,	//
centerOnScroll : false,	//
ajax : {},	//
swf : { wmode: 'transparent' },	//
hideOnOverlayClick : true,	//
hideOnContentClick : false,	//
overlayShow : true,	// использования режима наложения (false, true)
overlayOpacity : 0.7,	// прозрачность фона при наложении
overlayColor : '#777',	// заливка фона при наложении
titleShow : true,	// отображение заголовка (содержимое параметра Title элемента <a>)
titlePosition : 'float', // тип отображения заголовков ('float', 'outside', 'inside' или 'over')
titleFormat : null,	// формат заголовка
titleFromAlt : false,	// брать заголовок из параметра alt, а не из title (false, true)
transitionIn : 'fade', // эффект при открытии бокса ('elastic', 'fade' или 'none')
transitionOut : 'fade', // эффект при закрытии бокса ('elastic', 'fade' или'none')
speedIn : 300,	// скорость эффекта при открытии бокса
speedOut : 300,	// скорость эффекта при закрытии бокса
changeSpeed : 300,	// скорость эффекта при открытии\закрытии бокса
changeFade : 'fast',	// скорость эффекта при открытии\закрытии бокса
easingIn : 'swing',	//
easingOut : 'swing',	//
showCloseButton	 : true,	// отображения кнопки закрытия
showNavArrows : true,	// отображения кнопок навигации
enableEscapeButton : true,	//
enableKeyboardNav : true,	// возможность использовать навигационных кнопок клавиатуры
onStart : function(){},	// функции, запускаемые при срабатывании одного их следующих событий
onCancel : function(){},
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){}
...

Для того, чтобы более полно разобраться с возможностями настройки плагина, рекомендую скачать архив, включающий в себя все необходимые библиотеки таблицы стилей и примеры использования плагина и поэкспериментировать с параметрами. Или же, при достаточном знании английского, можно почитать интересные материалы на сайте разработчика плагина (там же, где смотрели примеры использования).

P.S. Кроме этого, недавно прочитал интересную статью про купоны Adwords от Google. Всем интересующимся – рекомендую.

Скачать: плагин “FancyBox”