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

13205 1574 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
Cсылка для скачивания animate.css, 69.15 Кб
fancybox-v.2.1.5.zip
Cсылка для скачивания fancybox-v.2.1.5.zip, 55.96 Кб
Другие статьи
Комментарии
7 месяцев назад
Спасибо, долго искал, оказывается все просто!
Комментировать