javascript - 我无法让 Magnific Popup 工作(js noob)

Question

我无法让 Magnific Popup 工作(js noob)

嘿伙计们，我讨厌问这样的问题，但我已经没有选择了。我遵循了文档以及几个 Youtube 视频和 StackOverflow 线程，但我显然遗漏了一些东西。我尝试了几个人推荐的初始化脚本，但这对我也没有帮助。目前，当我点击图片时，href 会工作(它会将我带到包含图片的页面)，但 Magnific 不会。

<div class="container">
    <a id="homegallery1" href="http://placehold.it/250x250"><img src="http://placehold.it/150x150" class="magnificpic" /></a>
</div>

CSS 链接:

<link href="css/magnific-popup.css" rel="stylesheet">

JS 链接:

/* JS */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>

初始化脚本:

<!------------------------------
 Script To Call Gallery On Click
-------------------------------->
<script>
    // Example with multiple objects
    $('#homegallery1').magnificPopup({
    items: [
      {
        src: 'http://placehold.it/350x250'
      },
      {
        src: 'http://placehold.it/250x350'
      },
      {
        src: 'http://placehold.it/350x350'
      },
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});
</script>

jsFiddle: http://jsfiddle.net/CSS_Apprentice/4coo0mxn/3/

Answer 1

您的脚本似乎缺少等待文档就绪部分。

 $(document).ready(function(){

    // jQuery methods go here...
    // try placing your ('#homegallery1').magnificPopup in here

 }); 

http://www.w3schools.com/jquery/jquery_syntax.asp