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

17359
2070
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');
		}
	});

});
 
Файлы для скачивания
animate.css
Cсылка для скачивания animate.css, 69.15 Кб
fancybox-v.2.1.5.zip
Cсылка для скачивания fancybox-v.2.1.5.zip, 55.96 Кб
Теги:
  • fancybox
  • animate.css
  • анимация
ДРУГИЕ СТАТЬИ
Шпаргалка: вывод элементов инфоблока через GetList
Выводим элементы инфоблока посредством CIBlockElement::GetList
6494
779
04.10.2022
Битрикс: ошибка type => unknown у метода CFile::MakeFileArray
Решение ошибки с неизвестным типом файла при использовании метода CFile::MakeFileArray
4989
598
03.12.2021
Интересные книги по математике
Подборка действительно интересных книг по математике для тех, кто хочет углубиться в программировании и математике
6252
750
22.10.2019
301 редиректы, которые пригодятся для SEO
Подборка 301 редиректов, которые пригождается на большинстве проектов и которые просят сделать для СЕО оптимизации
5095
611
16.04.2019
Комментарии
5 лет назад

Андрей

5 лет назад
Спасибо, долго искал, оказывается все просто!
Комментировать