title: Magnific PopUp error - opens on new page
body: <p>I am a newbie to java script code, though have a fairly good understand of css and html coding. I was excited and doing a test of the magnific popup for mywebsite but I can't seem to make it work. I read through the documentation, but I'm clearly still missing something, as it opens on it's own page rather than staying on the same url. I have put it on a javascript test site, and it keeps telling it me that there is a problem with the code "$(document).ready(function() {" </p>
  
  <p>Here is the code as I have it: 
      
      
      </p>
  
  <pre><code>&lt;!-- Magnific Popup core CSS file --&gt;
  &lt;link rel="stylesheet" href="magnific-popup/magnific-popup.css"&gt; 
  &lt;style&gt;
  
     .image-link {
     cursor: -webkit-zoom-in;
     cursor: -moz-zoom-in;
     cursor: zoom-in;
  }
  
  /* aligns caption to center */
  .mfp-title {
   text-align: center;
   padding: 6px 0;
   }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;//&lt;![CDATA[
     $(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;';
          }
      }
  });
  });
  //]]&gt;
  &lt;/script&gt;
  
  &lt;div class="popup-gallery"&gt;
  &lt;a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"&gt;      &lt;img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;!-- jQuery 1.7.2+ or Zepto.js 1.0+ --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; 
   &lt;!-- Magnific Popup core JS file --&gt;
   &lt;script src="magnific-popup/jquery.magnific-popup.js"&gt;&lt;/script&gt; 
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>