Magnific弹出窗口不工作

Question

我想在我的网站上实现magnific弹出窗口，我遵循了文档中的所有说明，但什么也没有发生。

下面是我包含的头文件。

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

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script> 

这是我的初始化代码。

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

$(document).ready(function() {
$('.portfolio-img').magnificPopup({
    delegate: 'a',
    type:'image'
   });
});  

我的代码是

<div class=" col-xs-offset-1"> 
   <div class=" twelve columns container">           
          <div data-anim-type="fadeInUp" class="setwidth25 animate fadeInUp">
                    <div class="box"> <a class=" portfolio-img"  href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" BORDER="0" src="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img"  href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20841080_1763381967286475_679893694361630086_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20914365_1763382237286448_3724536977546091967_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20953405_1763381833953155_7689290877386847638_n.jpg" height="200" width="200"> </a></div>
         </div>
   </div>
</div>

控制台没有显示与magnific弹出窗口相关的错误，但它不工作。我搜索了许多相关的文章，但没有一个有效。我用它撞了我的头超过6个小时。我的代码有什么问题吗？我该如何让它工作呢？请帮帮我！！...提前谢谢。

Answer 1

在您的代码中替换此代码块。并确保您的jquery和js路径正确。您使用了多个jquery和magnific js，这是不必要的。删除它，只尝试我在这里包含的两个脚本文件。我在cdn上用的。它在这里工作得很好。希望这会对你有所帮助。

​

$('.portfolio-img').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		image: {
			verticalFit: false
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

​

Answer 2

您似乎还没有将JavaScript代码包装在<script></script>标记中：

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

$(document).ready(function() {
$('.portfolio-img').magnificPopup({
    delegate: 'a',
    type:'image'
   });
});  

它可能应该是：

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

<script>
    $(document).ready(function() {
        $('.portfolio-img').magnificPopup({
            delegate: 'a',
            type:'image'
        });
    });  
</script>