2014-08-29 2 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/ –

ответ

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 Это случается с лучшими из нас!

Смежные вопросы