title: How to implement or create a Magnific Popup?
body: <p><strong>Intro:</strong><br>
  This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie.</p>
  
  <p><strong>What I want to know:</strong><br>
  I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed.</p>
  
  <p><strong>What I have done before I came to StackOverflow:</strong><br>
  Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image.</p>
  
  <p><strong>Sources:</strong><br>
  This is the documentation: <a href="http://dimsemenov.com/plugins/magnific-popup/documentation.html" rel="nofollow noreferrer">http://dimsemenov.com/plugins/magnific-popup/documentation.html</a>.<br>
  This is what I'm trying to create: <a href="http://dimsemenov.com/plugins/magnific-popup/" rel="nofollow noreferrer">http://dimsemenov.com/plugins/magnific-popup/</a> - on the Lightbox Gallery section.</p>
  
  <p><strong>HTML Structure I have tried, and failed:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;!-- Magnific Popup core CSS file --&gt;
  &lt;link rel="stylesheet" href="magnific-popup/magnific-popup.css"&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;/head&gt;
  
  &lt;body&gt;
  &lt;div class="popupgallery"&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;a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"&gt;&lt;img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"&gt;&lt;img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"&gt;&lt;img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"&gt;&lt;img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"&gt;&lt;img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"&gt;&lt;img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt; 
  $(document).ready(function() {
  
  $('.popupgallery').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      image: {
          verticalFit: false
      }
  });
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Note:</strong> <br>
  I also tried putting the .js files before <code>&lt;/body&gt;</code>, again, to not producing intended results.<br>
  I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.</p>
  
  <p>I hope someone out there would be kind enough to help me with this query.</p>
  
  <p><strong>Relevant queries:</strong><br>
  <a href="https://stackoverflow.com/questions/17371848/i-cant-get-magnific-popup-animations-to-work">I can&#39;t get magnific-popup animations to work</a><br>
  <a href="https://stackoverflow.com/questions/16461715/pop-up-not-showing-with-magnific-popup">Pop-up not showing (with magnific-popup)</a><br>
  <a href="https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup">https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup</a></p>
  
  <p>Thanks again! I would really appreciate your thoughts!</p>