Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
- }
- }
- });
Add Comment
Please, Sign In to add comment