title: Magnific Popup Gallery not working
body: <p>I'm trying to create a gallery with the Magnific Popup Lightbox Gallery plugin. I have checked the documentation by Dmitry Semenov and copied the code blocks exactly as he stated. This is my <code>&lt;head&gt;</code> section where I have all the files included:</p>
  
  <pre><code>&lt;head&gt;
   &lt;title&gt;Gallery&lt;/title&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="styles/core_styles_gallery2.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="styles/magnific-popup.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="scripts/jquery.magnific-popup.js"&gt;&lt;/script&gt;
    &lt;script src="scripts/jQuery_gallery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>As you can see there's simply the bootstrap files and my css sheets, the jQuery library file, plus the 2 .css and .js files for the magnific popup that the developer says to include. Here is my HTML gallery block of code (the class "hoverZoomLink" was used by the dev in his example):</p>
  
  <pre><code>&lt;div class="article-content"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="container"&gt;
              &lt;div class="popup-gallery"&gt;
                  &lt;a href="styles/images/gallery/image.jpg" class="hoverZoomLink"&gt;&lt;img src="styles/images/gallery/image.jpg" width="75" height="75"&gt;&lt;/a&gt;
                  &lt;a href="styles/images/gallery/image(1).jpg" class="hoverZoomLink"&gt;&lt;img src="styles/images/gallery/image(1).jpg" width="75" height="75"&gt;&lt;/a&gt;
                  &lt;a href="styles/images/gallery/image(2).jpg" class="hoverZoomLink"&gt;&lt;img src="styles/images/gallery/image(2).jpg" width="75" height="75"&gt;&lt;/a&gt;
                  &lt;a href="styles/images/gallery/image(3).jpg" class="hoverZoomLink"&gt;&lt;img src="styles/images/gallery/image(3).jpg" width="75" height="75"&gt;&lt;/a&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Finally, this is the jQuery code (located in the external jQuery_gallery.js file I included in the <code>&lt;head&gt;</code> ) that is supposed to initialise the popup:</p>
  
  <pre><code>$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
          tError: '&lt;a href="%url%"&gt;The image #%curr%&lt;/a&gt; could not be loaded.',
          titleSrc: function(item) {
              return item.el.attr('title') + '&lt;small&gt;by Marsel Van Oosten&lt;/small&gt;';
          }
      }
  });});
  </code></pre>
  
  <p>Well, nothing is working. When I click on the images, they simply open in another tab. I am new to programming and web development, I have tried to understand the errors but I have no idea what am I doing wrong. Please help me!</p>