Can't get even a simple test example of Magnific Popup inline to work

Question

I am going to go on and apologize from the start- I am sure this is a silly issue, but I just can't seem to find what I am doing wrong here (including searching stack overflow which has some questions on this) and it has literally been days. I've basically copied and pasted the example for an inline popup for Magnific Popup (http://codepen.io/dimsemenov/pen/GEKgb), but even that doesn't work (I am working on a different use, but whatever I am doing wrong, it's also with even this simple example).

Code is below, but I also did a JSFiddle:

http://jsfiddle.net/avogel27/RS6aR/

Thanks for any help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"> 
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>

<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<!--
Alternative markup with data-mfp-src attribute:
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a>
-->

<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
  Popup content
</div>

<br/><br/>
<button>Dynamically create and show popup</button>

<script>

$(document).ready(function() {
    // Example 1: From an element in DOM
    $('.open-popup-link').magnificPopup({
        type:'inline',
        midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });

// Example: 2 Dynamically created
    $('button').magnificPopup({
        items: {
            src: '<div class="white-popup">Dynamically created popup</div>',
            type: 'inline'
        },
        closeBtnInside: true
    });
});


</script>

</body>
</html>

score 0 · Accepted Answer · answered Jun 15 '14 at 02:04

0

The problem with your jsfiddle is you added the external reference incorrectly. It should be http://www.metoceanpartnerships.org/js/jquery.magnific-popup.js instead of www.metoceanpartnerships.org/js/jquery.magnific-popup.js.

You are also missing the css style for the popup:

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width:auto;
    max-width: 500px;
    margin: 20px auto;
}

http://jsfiddle.net/E8wD6/

answered Jun 15 '14 at 02:04

Wayne Ellery

7,888
1
28
45

I really appreciate your help, I also got my JSFiddle to start working. I don't suppose you have any thoughts on the code I've posted above? Even though I've updated the CSS, the lightbox continues to not open when working on a test site. I've tested all the source files, that the JS was getting called in HTML, went down the JQuery 1.10.1, but to no avail. – user3398945 Jun 15 '14 at 03:19
Have you checked the javascript console on your browser to see if there are any errors? Also check the network tab to make sure all the javascript and css is loading. Are you seeing a black background at least or is it just not working at all? – Wayne Ellery Jun 15 '14 at 03:29
Not working at all. The error it shows is: TypeError: 'undefined' is not a function (evaluating '$('.open-popup-link').magnificPopup') So I guess it's somehow not seeing the html class or button? I am obviously not enough of a programer to know why this is happening, given that I largely copied and pasted this code – user3398945 Jun 15 '14 at 03:35
Well I just found the solution... I needed to call jquery before magnific-popup. Had never realized the order in the header was important. Thanks for helping me think this through. Happy to take the negative votes to get this solved. – user3398945 Jun 15 '14 at 03:56
Glad you got it sorted. Do you mean that you needed to include the jQuery library first, before magnific-popup? – Wayne Ellery Jun 15 '14 at 04:08
Yes, that's what solved it, listing the jquery library in the header before listing magnific-popup. – user3398945 Jun 15 '14 at 04:38
Ok. That is because the magnific-popup is a jQuery plugin so you need to first include the jQuery library. In your code above and in the js fiddle you had jQuery first. – Wayne Ellery Jun 15 '14 at 04:43

Can't get even a simple test example of Magnific Popup inline to work

1 Answers1