Анимация окна fancybox с помощью animate.css

12 Декабря 2016, 19:40

Идин из самых распространенных jquery плагинов модальных окон - это fancybox. Популярность плагина обусловлена наличием подробной документацией, множеством возможностей, богатым API. 

Для заказов потребовалось изменить анимацию открытия и закрытия окна. Большой выбор анимаций есть в animate.css. Именно animate.css мы будем использовать для анимации окна fancybox.

Используются 2 метода API: afterLoad - событие перед появлением окна и beforeClose - событие перед закрытием страницы. 

Решение:

Используя afterLoad и beforeClose необходимо вешать классы анимации на обертку fancybox: 

$('.modal').on('click',function(){

	$.fancybox({
		type : 'inline',
		href : '.fancy',
		padding : 0,
		scrolling : 'visible',
		afterLoad : function(){
			$(".fancybox-skin").addClass('fadeInDown animated');
		},
		beforeClose : function(){
			$(".fancybox-skin").addClass('fadeOutDown animated');
		}
	});

});
 
Теги: fancybox animate.css анимация
Файлы для скачивания
animate.css
Прямая ссылка для скачивания animate.css, 69.15 Кб
fancybox-v.2.1.5.zip
Прямая ссылка для скачивания fancybox-v.2.1.5.zip, 55.96 Кб
Другие статьи
12 Декабря 2016, 19:40
Анимация окна fancybox с помощью animate.css
12 Декабря 2016, 12:36
Схема таблиц XPDO
Комментарии
Последние комментарии
Иван
Иван 1 год назад
1
Sadieff
Sadieff 1 год назад
17
Sadieff
Sadieff 1 год назад
2
Группа вконтакте