fancybox – организация просмотра фотографий

Автор admin    0 коммент. »

Эта библиотека написана на jquery. Пользоваться крайне удобно, а так же можно самому настроить внешний вид в прилагаемом к библиотеке стилю.

Подключение тоже не составит никакого труда, собственно, об этом я и собираюсь написать в этой статье.

Для начала нам потребуется сама библиотека, скачать которую можно по ссылке

И так у нас есть список фотографий:

$("#media_photos a").fancybox({
	'overlayShow'  : false,
	'zoomSpeedIn'  : 600,
	'zoomSpeedOut' : 500,
	'easingIn'     : 'easeOutBack',
	'easingOut'    : 'easeInBack'
});

Остальные свойства, которые можно задать:

• imageScale Если true, изображения масштабируется в соответствии с областью просмотра
• zoomOpacity Если true, появление с уменьшением прозрачности фотографии
• zoomSpeedIn скорость анимации появления в милисекундах (без анимации, если 0)
• zoomSpeedOut скорость анимации исчезания в милисекундах (без анимации, если 0)
• zoomSpeedChange скорость анимации при семене изображения в милисекундах (без анимации, если 0)
• easingIn, easingOut, easingChange Замедлить/ускорить анимацию в начале/в конце
• frameWidth Ширина изображения
• frameHeight Высота изображения
• overlayShow Если true, Затемняет страницу позади изображения, настройка в CSS файле
• overlayOpacity Прозрачность затемнения страницы (от 0 до 1)
• hideOnContentClick Скрывает FancyBox при клике
• centerOnScroll Если true, содержимое центрируется, когда пользователь прокручивает страницу
• itemArray Передать массив для последующего обращения к нему
• callbackOnStart Вызвать функцию при начале показа
• callbackOnClose Вызвать функцию при завершении показа