Question

我想在我的网站上实现大胆的弹出窗口，我按照文档中的所有说明进行操作，但没有任何反应。

这是我收录的头文件。

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

控制台显示没有与夸张弹出窗口相关的错误，但它无法正常工作。我查了很多相关的文章，但没有一个有效。我用这个打了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

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

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

Magnific-Popup不起作用

2 个答案: