Всем привет! Это 17-й урок по созданию сайта с нуля под ключ на заказ и сегодня мы поработаем над красивой попап галереей, выполненной с использованием плагина Magnific-Popup.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Необходимые для прохождения урока файлы: Скачать
Magnific-Popup: http://dimsemenov.com/plugins/magnific-popup/
CSS to Sass Converter: http://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); } } });
Премиум уроки от WebDesign Master
Другие уроки по теме «MODx»
- Создание сайта с нуля. Урок #34. Посадка секции «Поставляемое оборудование» на MODx (pdoResources)
- Создание сайта с нуля. Урок #33. Посадка секции «Выполненные работы» на MODx (Всплывающие окна)
- Создание сайта с нуля. Урок #32. Посадка секции «Направления услуг» на MODx (pdoResources)
- Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof)
- Создание сайта с нуля. Урок #30. Посадка секции тизеров на MODx
- Создание сайта с нуля. Урок #29. Посадка HTML верстки шапки на MODx