Skip to content

Instantly share code, notes, and snippets.

@agragregra
Last active January 31, 2022 09:39
Show Gist options
  • Save agragregra/54395658223c1cba5d00 to your computer and use it in GitHub Desktop.
Save agragregra/54395658223c1cba5d00 to your computer and use it in GitHub Desktop.
Magnific Gallery with Animation & Preloader | http://codepen.io/agragregra/pen/OMNLQJ
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);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment