Ошибка Magnific PopUp - открывается на новой странице

Я новичок в коде java-скриптов, хотя довольно хорошо понимаю кодирование css и html. Я был взволнован и тестировал великолепное всплывающее окно для моего веб-сайта, но, похоже, я не могу заставить его работать. Я прочитал документацию, но явно что-то упускаю, поскольку она открывается на собственной странице, а не остается на том же URL-адресе. Я разместил его на тестовом сайте javascript, и он продолжает говорить мне, что есть проблема с кодом "$(document).ready(function() {"

Вот код, как он у меня есть:

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
<style>

   .image-link {
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
   cursor: zoom-in;
}

/* aligns caption to center */
.mfp-title {
 text-align: center;
 padding: 6px 0;
 }

</style>

</head>
<body>
<script type="text/javascript">//<![CDATA[
   $(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>

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

</div>
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 <!-- Magnific Popup core JS file -->
 <script src="magnific-popup/jquery.magnific-popup.js"></script> 

 </body>
 </html>

Любая помощь будет принята с благодарностью!


javascript html jquery magnific-popup
person camelot    schedule 19.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, вы неправильно разместили атрибут класса

Вместо того, чтобы назначать его тегу div:

<div class="popup-gallery">

Добавьте его в тег a:

<div>
  <a class="popup-gallery" 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> 
</div>
person Igor Savinkin    schedule 10.12.2014