Question

我是java脚本代码的新手，虽然对css和html编码有相当好的理解。我很兴奋，并为mywebsite测试了巨大的弹出窗口，但我似乎无法使其工作。我阅读了文档，但我显然仍然遗漏了一些东西，因为它在它自己的页面上打开而不是保持在同一个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>

非常感谢任何帮助！

Answer 1

您似乎错放了类属性

而不是将其分配到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>

Magnific PopUp错误 - 在新页面上打开

1 个答案:

您似乎错放了类属性