Создание сайта с нуля. Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup)

Это 17-й урок по созданию сайта с нуля под ключ на заказ и сегодня мы поработаем над красивой попап галереей, выполненной с использованием плагина Magnific-Popup.

Файлы для прохождения урока: Скачать

Magnific-Popup: https://dimsemenov.com/plugins/magnific-popup/

CSS to Sass Converter: https://css2sass.herokuapp.com

Magnific-Popup Animation & Preloader:

// SASS:
.mfp-ready .mfp-figure
	opacity: 0
.mfp-zoom-in
	.mfp-figure, .mfp-iframe-holder .mfp-iframe-scaler
		opacity: 0
		transition: all 0.3s ease-out
		transform: scale(0.95)
	&.mfp-bg, .mfp-preloader
		opacity: 0
		transition: all 0.3s ease-out
	&.mfp-image-loaded .mfp-figure
		opacity: 1
		transform: scale(1)
	&.mfp-ready
		.mfp-iframe-holder .mfp-iframe-scaler
			opacity: 1
			transform: scale(1)
		&.mfp-bg, .mfp-preloader
			opacity: 0.8
	&.mfp-removing
		.mfp-figure, .mfp-iframe-holder .mfp-iframe-scaler
			transform: scale(0.95)
			opacity: 0
		&.mfp-bg, .mfp-preloader
			opacity: 0

.mfp-iframe-scaler
	overflow: visible
.mfp-zoom-out-cur
	cursor: auto
	.mfp-image-holder .mfp-close
		cursor: pointer
.mfp-preloader
	width: 30px
	height: 30px
	background-color: #FFF
	opacity: 0.65
	margin: 0 auto
	animation: rotateplane 1.2s infinite ease-in-out
@-webkit-keyframes rotateplane
	0%
		-webkit-transform: perspective(120px)
	50%
		-webkit-transform: perspective(120px) rotateY(180deg)
	100%
		-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
@keyframes rotateplane
	0%
		transform: perspective(120px) rotateX(0deg) rotateY(0deg)
	50%
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
	100%
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)

// JS:
$('div').magnificPopup({
	mainClass: 'mfp-zoom-in',
	delegate: 'a',
	type: 'image',
	tLoading: '',
	gallery:{
		enabled:true,
	},
	removalDelay: 300,
	callbacks: {
		beforeChange: function() {
			this.items[0].src = this.items[0].src + '?=' + Math.random(); 
		},
		open: function() {
			$.magnificPopup.instance.next = function() {
				var self = this;
				self.wrap.removeClass('mfp-image-loaded');
				setTimeout(function() { $.magnificPopup.proto.next.call(self); }, 120);
			}
			$.magnificPopup.instance.prev = function() {
				var self = this;
				self.wrap.removeClass('mfp-image-loaded');
				setTimeout(function() { $.magnificPopup.proto.prev.call(self); }, 120);
			}
		},
		imageLoadComplete: function() { 
			var self = this;
			setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
		}
	}
});