2014-08-29 152 views
0

我对js,css很新。我一直在挠头,为什么我的代码无法正常显示在网站上。Magnific Popup不弹出

下面是HTML页面

<!DOCTYPE html> 
<head> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="jquery.magnific-popup.min.js"></script> 
     <script> 
      $(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: '<a href="%url%">The image #%curr%</a> could not be loaded.', 
         titleSrc: function(item) { 
          return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; 
         } 
        } 
       }); 
      }); 
     </script> 

</head> 
<body> 
<div class="popup-gallery"> 
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a> 
</div> 

</body> 
</html> 

这里是一个的jsfiddle http://jsfiddle.net/sbm7/1pu0hyb7/1/

任何人的代码能告诉我一些光吗?

+0

似乎工作正常http://jsfiddle.net/1pu0hyb7/2/ – 2014-08-29 04:33:31

回答

0

您的JS小提琴缺少在左侧加载的jQuery。这也是缺少代码到外部CSS文件:)实际的小提琴会很好,如果你真的加载了jQuery库和外部CSS文件。

<link rel="stylesheet" href="http://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css?v=0.9.9"> 
<script src="http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=0.9.9"></script> 

见下文:

http://jsfiddle.net/benjih111/nka153r8/

:d它发生在我们最好的!