i'm with some problems here. I've tried everything for days! I already look at other questions here to try to solve my problem, but i can't still make magnific-popup to work.
I don't know what i'm doing wrong, i searched google, the original documentation, stackoverflow questions, but my site just doesn't show the pop-up.
Here is the code i have so far.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script>
$(document).ready(function($){
// Inline popups
$('#inline-popups').magnificPopup({
delegate: 'a',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
</script>
</head>
<body>
<h3>Magnific Popup CSS3-based animation effects</h3>
<div class="links">
<h4>Text-based:</h4>
<ul id="inline-popups">
<li><a href="#test-popup" data-effect="mfp-zoom-out">Zoom-out</a></li>
</ul>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. 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.</div>
</body>
</html>
The JS and CSS file included in my project i made the download from this page: https://github.com/dimsemenov/Magnific-Popup/tree/master/dist
I also added some extra code on my CSS file based on this stackoverflow question: I can't get magnific-popup animations to work
This is the CSS code i added:
html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom-out effect ======
*/
.mfp-zoom-out.mfp-bg {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-bg.mfp-ready {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
.mfp-zoom-out.mfp-bg.mfp-removing {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.mfp-zoom-out .mfp-content{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.mfp-zoom-out.mfp-ready .mfp-content {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.mfp-zoom-out.mfp-removing .mfp-content {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* preview styles */
html {
font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}
h3 {
margin-top: 0;
font-size: 24px;
}
a,
a:visited {
color: #1760BF;
text-decoration: none;
}
a:hover {
color: #c00;
}
.links {
ul {
}
li {
margin-bottom: 5px;
}
}
h4 {
margin: 24px 0 0 0;
}
.bottom-text {
margin-top: 40px;
border-top: 2px solid #CCC;
a {
border-bottom: 1px solid #CCC;
}
p {
max-width: 650px;
}
}
/*
I really hope you guys can help me, because i don't know what else i can do to fix this. Thanks.
