Magnific Popup will not work
<p>I'm trying to get the magnific popup jQuery library to work on my site.</p>

<p>See my HTML below; it seems to include the stylesheet and scripts properly. You'll notice I'm using: </p>

<pre><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
</code></pre>

<p>instead of the recommended:</p>

<pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>but I have already tried replacing the former with the latter and it still doesn't work. Full html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="styles/normalize.css"&gt;
&lt;link rel="stylesheet" href="styles/mystyles.css"&gt;
&lt;link rel="stylesheet" href="dimsemenov-Magnific-Popup-2ff1692/dist/magnific-popup.css"&gt;
&lt;link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,600,700|Inconsolata|Indie+Flower|Oswald:400,700|Taviraj:400,600,700" rel="stylesheet"&gt;
&lt;link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' /&gt;
&lt;title&gt;Zach Sedefian&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="top"&gt;
    &lt;h1&gt;Personal page&lt;/h1&gt;
&lt;/div&gt;
&lt;div class="left"&gt;
    &lt;nav&gt;
        &lt;a class="nav-link" id="link-1"&gt;About&lt;/a&gt;
        &lt;a class="nav-link" id="link-2"&gt;Web&lt;/a&gt;
        &lt;a class="nav-link" id="link-3"&gt;Music&lt;/a&gt;
        &lt;a class="nav-link" id="link-4" onclick=&gt;Photo&lt;/a&gt;
        &lt;a class="nav-link" id="link-5"&gt;Contact&lt;/a&gt;
    &lt;/nav&gt;
&lt;/div&gt;
&lt;div class="main"&gt;
    &lt;p class="main-p"&gt;Welcome. Use the sidebar to navigate.&lt;/p&gt;  
&lt;/div&gt;
</code></pre>







<p></p>

<p>I know this is odd I'm adding the relevant img / div HTML through a click() function, shown here:</p>

<pre><code>$('#link-4').click(function(){
$('.main').html("");
$('.main').html('&lt;div class="photo-gallery"&gt;&lt;div class="photo-container"&gt;&lt;a class="test" href="images/mosque-L.jpg"&gt;&lt;img class="test-img" src="images/mosque-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/square-L.jpg"&gt;&lt;img src="images/square-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/light-L.jpg"&gt;&lt;img src="images/light-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/arch-L.jpg"&gt;&lt;img src="images/arch-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/cows-L.jpg"&gt;&lt;img src="images/cows-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/land-L.jpg"&gt;&lt;img src="images/land-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/cascade-L.jpg"&gt;&lt;img src="images/cascade-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/guard-L.jpg"&gt;&lt;img src="images/guard-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/green-L.jpg"&gt;&lt;img src="images/green-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/edu-L.jpg"&gt;&lt;img src="images/edu-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/biz-L.jpg"&gt;&lt;img src="images/biz-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="photo-container"&gt;&lt;a href="images/cal-L.jpg"&gt;&lt;img src="images/cal-Q.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;a href="https://www.flickr.com/photos/148227185@N05/"&gt;More on flickr&lt;/a&gt;&lt;/p&gt;');
});
</code></pre>

<p>I have tried putting it on the actually index.html file but it also changes nothing.</p>

<p>I'm attempting to call the magnificpopup() function in app.js in various ways. The first is the way I'd like to have it, and the bottom two are the simplest possible ways to call it (also not working). </p>

<pre><code>  $('.photo-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  closeOnContentClick: true, 
  gallery:{enabled:true}
});

$('.test').magnificPopup({type:'image'});
$('.test-img').magnificPopup({type:'image'});
</code></pre>

<p>Not getting any debug errors. Any help would be greatly appreciated. This is the first time I've come to this site and not found an answer on someone else's thread. Thanks in advance.</p>