Simple Magnific pop-up does not fire

Question

Pop-up not working - it's an iframe type, attempting to load a Google map. I've paired the code down to an absolute minimum. Using web developer toolbar in Firefox, I have confirmed that the linked js code is loading but clicking the link just navigates to the Google maps site.

What am I doing wrong?

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<title>magnificPopup</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="js/magnific-popup.css" />
</head>
<body>
    <div style="margin:50px;">
    <a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
    </div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.popup-gmaps').magnificPopup({
            disableOn: 700,
            type: 'iframe',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
           });
       });
    </script>
    <script src="js/Zeptov1.js" type="text/javascript"></script>
    <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
</body>
</html>

Thanks Jeffrey - resolved, the inline javascript (document),ready... has to be included after the zeptov and magnific scripts. — Robert, Sep 13 '13 at 19:04

score 0 · Accepted Answer · answered Sep 13 '13 at 18:29

I can't see any jQuery core include; load jQuery first, than plugin and your code.

Try change the code into:

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
    <title>magnificPopup</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="js/magnific-popup.css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/Zeptov1.js" type="text/javascript"></script>
    <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.popup-gmaps').magnificPopup({
                disableOn: 700,
                type: 'iframe',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
             });
         });
    </script>
</head>
<body>
    <div style="margin:50px;">
    <a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
    </div>
</body>
</html>

Zepto is a jQuery equivalent which magnific also works with. The http://dimsemenov.com/plugins/magnific-popup/ web page itself uses Zepto rather than jQuery. I tried moving the script into the section but it made no difference. — Robert, Sep 13 '13 at 18:52
Resolved, the inline javascript (document),ready... has to be included after the zeptov and magnific scripts. — Robert, Sep 13 '13 at 19:05

Simple Magnific pop-up does not fire

1 Answers1