Magnific Popup Настроить

Question

Я просто вернусь к веб-разработке, поэтому простите меня, если я буду звучать невежественно. Я пытаюсь настроить эффект лайтбокса, используя Magnific Popup. Мне это нравится, потому что все примеры используют отзывчивый дизайн.

Я следовал инструкции здесь: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool

И здесь: http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/

несколько раз, и я не понимаю, почему всплывал не подходит. Он просто привязывает меня к новому окну с изображением на нем, а не всплывает.

У меня есть это в моей голове тег:

<!-- 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> 

Это мой 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

У меня была такая же проблема, и имел такую ​​же установку, как вы. Я думал, что я уже назвал библиотеку jQuery, но, видимо, нет, потому что, как только я добавил код (ниже) перед закрытием своего HEAD, все приступило к работе! Я знаю, что этот ответ около года запоздал, но, возможно, это поможет другим в будущем.

<script type="text/javascript" 
     src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>