You can try this.
First you need to create close and open animation.
and then add the animation to .white-popup-block when popout is open and then add the animation to .mfp-removing when the popup is closing.
.white-popup-block {
background: #ccc;
padding: 20px;
max-width: 300px;
margin: 0 auto;
animation: open 1s;
}
.mfp-removing{
animation: close 1s;
}
@keyframes open {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes close {
0% {opacity: 1;}
100% {opacity: 0;}
}
After that you need to create a delay using removalDelay and make it 900, since keyframe animation is 1s, I set the delay to 900ms delay should be less than the keyframe animation time.
$('.popup-with-content').magnificPopup({
type: 'inline',
preloader: false,
gallery:{enabled:true},
removalDelay: 900,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
});
Please see this fiddle https://jsfiddle.net/gbp31r8n/26/
Hope this helps.
Answer from davecar21 on Stack OverflowCodePen
codepen.io › MATEY15 › pen › oBQqgd
magnific-popup fade-slide
#small-dialog { background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; } .mfp-hide { display: none; } /** * Fade-zoom animation for first dialog */ /* start state */ .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-r
fade transition between gallery images
Can we have better transitions between gallery images, please? fading would be a good start! thank you More on github.com
5
April 2, 2014Animation on Gallery
I have a gallery setup with different links pointing to AJAX content. Is there a way to animate so that when you click the next or previous buttons it fades the windows in and out instead of just b... More on github.com
23
June 10, 2013Magnific Popup CSS3 animation effects
Very related, just released today on Codrops.
http://tympanus.net/Development/ModalWindowEffects/
More on reddit.com 15
195
June 26, 2013lightbox - I can't get magnific-popup animations to work - Stack Overflow
I've been through the excellent ...m/plugins/magnific-popup/documentation.html I have the basic pop up working fine. My problem is with the animations. I just can't get them to work. Apologies if I've missed something very basic but I've spent too long on this now and hope someone can point out my mistake. It currently just appears no fade ... More on stackoverflow.com
GitHub
gist.github.com › de757f43e450c5a90ed8d0871b00053e
Magnific Popup Smooth Fade Effect · GitHub
October 9, 2016 - Magnific Popup Smooth Fade Effect. GitHub Gist: instantly share code, notes, and snippets.
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 359
fade transition between gallery images · Issue #359 · dimsemenov/Magnific-Popup
April 2, 2014 - Can we have better transitions between gallery images, please? fading would be a good start! thank you
Author nicmare
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 112
Animation on Gallery · Issue #112 · dimsemenov/Magnific-Popup
June 10, 2013 - I have a gallery setup with different links pointing to AJAX content. Is there a way to animate so that when you click the next or previous buttons it fades the windows in and out instead of just b...
Author alexranc
CodePen
codepen.io › dimsemenov › pen › kVbqdN
CSS3 animation effects for Magnific Popup
}); // Hinge effect popup $('a.hinge').magnificPopup({ mainClass: 'mfp-with-fade', removalDelay: 1000, //delay removal by X to allow out-animation callbacks: { beforeClose: function() { this.content.addClass('hinge'); }, close: function() { this.content.removeClass('hinge'); } }, midClick: true });
Dimsemenov
dimsemenov.com › plugins › magnific-popup
Magnific Popup: Responsive jQuery Lightbox Plugin
More animation effects on CodePen. Open with fade-zoom animation Open with fade-slide animation · This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.
Reddit
reddit.com › r › web_design › comments › 1h1am6 › magnific_popup_css3_animation_effects
r/web_design - Magnific Popup CSS3 animation effects
June 26, 2013 - As much as this was slick and interesting, the newspaper effect kinda made me feel sick. ... Nice! The DOM structure made it a bit tricky for me to try, but have you thought about maybe using pointer-events: none; on the fade-out so the interface doesn't have to wait for the fade to complete to be interactive again? To simulate what I mean, while a popup is up, click a link in the background twice.
Kriesi
kriesi.at › home › topics › enfold › graceful transition for pop up modals
Graceful transition for pop up modals - Support | Kriesi.at - Premium WordPress Themes
April 21, 2020 - function add_lightbox_effect() { ?> <script type="text/javascript"> (function($) { $(window).load(function(){ $('.inline-popups').magnificPopup({ delegate: 'a', removalDelay: 500, mainClass: 'mfp-3d-unfold', type:'inline', midClick: true, }); $(document).on('click', '.popup-modal-dismiss', function (e) { $.magnificPopup.close(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_lightbox_effect'); the popup-modal-dismiss thing is not needed for that – but if there is a button to go to f.e.
Top answer 1 of 5
11
I ran into this same problem and after banging my head against all the hard surfaces in my office I discovered that I need to rename the css classes to match the fade example he provided here.
So for example the mfp-zoom-out animation:
.mfp-zoom-out .mfp-with-anim should be .mfp-zoom-out.mfp-bg
.mfp-zoom-out.mfp-bg stays the same
.mfp-zoom-out.mfp-ready .mfp-with-anim should be .mfp-zoom-out.mfp-ready .mfp-content
.mfp-zoom-out.mfp-ready.mfp-bg should be .mfp-zoom-out.mfp-bg.mfp-ready
.mfp-zoom-out.mfp-removing .mfp-with-anim should be .mfp-zoom-out.mfp-removing .mfp-content
.mfp-zoom-out.mfp-removing.mfp-bg should be .mfp-zoom-out.mfp-bg.mfp-removing
2 of 5
0
Check i have code for Fade-zoom animation for first dialog and Fade-move animation for second dialog.
You can get magnific-popup.css and magnific-popup.min.js files in the dist folder...Files can be downloaded from https://github.com/dimsemenov/Magnific-Popup
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
</head>
<body>
<div class="example gc3">
<h3>Dialog with CSS animation</h3>
<div class="html-code">
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a>
<!-- dialog itself, mfp-hide class is required to make dialog hidden -->
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<h1>Dialog example</h1>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});
</script>
<style type="text/css">
/* Styles for dialog window */
#small-dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 400px;
margin: 40px auto;
position: relative;
}
/**
* Fade-zoom animation for first dialog
*/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0.001; /* Chrome opacity transition bug */
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Fade-move animation for second dialog
*/
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-o-transform: translateY(0) perspective( 600px ) rotateX( 0 );
transform: translateY(0) perspective( 600px ) rotateX( 0 );
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
opacity: 0;
-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
opacity: 0.01;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</div>
</body>
</html>
Dimsemenov
dimsemenov.com › plugins › magnific-popup › documentation.html
Magnific Popup Documentation
String that contains classes that will be added to the root element of popup wrapper and to dark overlay. For example "myClass", can also contain multiple classes - 'myClassOne myClassTwo'. ... Preloader in Magnific Popup is used as an indicator of current status...
Design Link Work
designlink.work › magnific-popup-3
Magnific Popup #3. CSS3-based animation effects - Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself. Here we summarize the CSS3-based animation settings. | Design Link Work
March 1, 2018 - Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself. Here we summarize the CSS3-based animation settings.
Simmons University
web.simmons.edu › ~grovesd › comm244 › notes › week13 › magnific › magnific
How to Use Magnific | Comm244 Notes
Magnific requires it's own CSS code in order to display things properly. Simply add the magnific-popup.css to your page like a normal CSS document.
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 1087
MagnificPopup.close and fade from another button · Issue #1087 · dimsemenov/Magnific-Popup
September 24, 2018 - Hi, i'm trying to use another element outside the popup as the close button. I'm able to add the close function, but it close right away, without waiting for the animation to complete, so ther's no fading. If i leave the alert message, after closing it it fades away like i want. Is there something i'm missing? var closePopup = function() { $.magnificPopup.close(); // Close popup that is currently opened }; $hamburger.magnificPopup({ removalDelay: 500, mainClass: 'mfp-fade', items: { src: '#navigation', type: 'inline' }, callbacks: { open: function() { // Will fire when this exact popup is opened // this - is Magnific Popup object //alert('ok'); $hamburger.bind('click',closePopup); $hamburger.toggleClass("is-active"); }, close: function() { $hamburger.unbind("click",closePopup); $hamburger.toggleClass("is-active"); } // e.t.c.
Author uitta
GitHub
github.com › dimsemenov › Magnific-Popup › blob › master › website › _includes › examples.html
Magnific-Popup/website/_includes/examples.html at master · dimsemenov/Magnific-Popup
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } </style> <script type="text/javascript"> $(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, ·
Author dimsemenov
Team Treehouse
teamtreehouse.com › community › magnific-popup-update-class-on-change-of-image
Magnific Popup: Update class on change of image. (Example) | Treehouse Community
August 31, 2016 - $('.gallery').magnificPopup({ type: 'image', delegate: 'a', removalDelay: 500, mainClass: 'mfp-with-fade', image: { markup: '<div class="mfp-figure">' + '<div class="mfp-logo"><img src="' + wnm_custom.template_url + '/img/ryan-c-jones-logo.png" alt=""></div>' + '<div class="mfp-img"></div>' + '<div class="mfp-bottom-bar mfp-prevent-close">' + '<span title="%title%" class="mfp-arrow mfp-arrow-left"><img src="' + wnm_custom.template_url + '/img/left-arrow.svg" alt="Previous" class="mfp-prevent-close"></span>' + '<div class="mfp-caption-wrap">' + '<div class="mfp-title"></div>' + '<div class="mfp
Digital Point
forums.digitalpoint.com › threads › problem-with-magnific-popup-dailog-css-3-animation-effect.2729557
Problem with Magnific Popup Dailog css 3 animation effect
August 11, 2014 - I just found this searching and its too much good for popup effecr http://dimsemenov.com/plugins/magnific-popup/ I tried too much applying the same...
GitHub
github.com › dimsemenov › Magnific-Popup › issues
dimsemenov/Magnific-Popup
Light and responsive lightbox script with focus on performance. - dimsemenov/Magnific-Popup
Author dimsemenov
CodePen
codepen.io › lnpt › pen › zxzzzX
Magnific Popup + Animate.css
<h1>magnific-popup.js + animate.css</h1> <p>Responsive lightbox on drugs.</p> <ul> <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeIn">fadeIn</a></li> <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInDown">fadeInDown</a></li> <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInDownBig">fadeInDownBig</a></li> <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInLeft">fadeInLeft</a></li> <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="f
Top answer 1 of 4
1
I just ran into this problem so I thought I'd give you my answer/solution.
The Reason: Since your using owl carousel to loop, owl carousel is cloning items. Because your cloning the items within your carousel you're now feeding duplicates into the popup gallery. What a hassle right? There are two seemingly obvious solutions.
Solution 1: Don't use owl-carousel's loop.
This may not be the preferred solution if you want the looping feature of your carousel but this will no longer cause the popup to receive duplicate entries.
Solution 2: Create an array of objects based on the resulting elements, remove the duplicates, then use magnific's items property to set the gallery items.
Here is a working script I had to create based off a similar scenario I'm sure you can dissect what the process is:
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.gallery img').each(function(i){
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('gallery').magnificPopup({
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
});
}
});
})( jQuery );
2 of 4
1
I found that @Chris Stage's answer works perfectly, but for some n00bs who try to use the code verbatim may run into issues. I can't just leave a comment or accept the answer so I am posting my revision in hopes that it provides someone else with the correct code.
The one issue I found was that in the .each() function, that you have to target the wrapping a tag's URL to the larger image, not the image's URL itself due to the fact that the one used in the carousel may be a thumbnail or equivalent, and the larger one to the "larger image" to open in a popup may be a separate URL.
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.photo-gallery .item a').each(function(i){ //Target your wrapping a tag
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('.photo-gallery').magnificPopup({ //Target parent carousel container
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
removalDelay: 300,
mainClass: 'mfp-fade' //Adds magnific's fade effect
});
}
});
})( jQuery );
This solution worked perfectly with Owl's issue with "cloned" images and thanks to @Chris Stage for coming up with this. His answer should be the "Accepted Answer" but I'd also love an Upvote for the clarification so I can earn some Rep points :)