Magnific Popup Set up - popup

Question

I'm just getting back into web development so forgive me if I sound ignorant. I'm trying to set up a lightbox effect using Magnific Popup. I love it because all of the examples are using responsive design.
I've followed instructions here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
And here: http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/
A few times and I don't understand why the pop up isn't coming up. It just links me to a new window with the image on it and not a pop up.
I have this in my head tag:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>
</script>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
This is my html:
<a class="image-popup-vertical-fit" href="images/logo.png" title="TITLE">
<img src="images/print.png" border="0" align="center" class="image2" /></a>

Answer 1

I had the same problem, and had the same setup as you. I thought I had called the jQuery library already, but apparently not, because as soon as I added the code (below) before closing my HEAD, everything started working! I know this answer is about a year belated, but maybe it will help others in the future.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>