Magnific-Popup 不工作答案

【问题标题】：Magnific-Popup Not WorkingMagnific-Popup 不工作
【发布时间】：2017-11-24 12:51:03
【问题描述】：

我想在我的网站上实现宏伟的弹出窗口，我按照文档中的所有说明进行操作，但没有发生任何事情。

这是我包含的头文件。

<!-- 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 popup 相关的错误，但它无法正常工作。我搜索了许多相关文章，但没有一篇有效。我用这个敲了六个多小时。我的代码有问题吗。我如何使它工作？请帮忙！！...提前致谢。

【问题讨论】：

首先：为什么要包含缩小版和普通版的脚本？
我没听懂你
看来你已经包含了两个：
刚试了下是否可行:)

标签： javascript html magnific-popup

【解决方案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>

【讨论】：

感谢您的回复....我按照您所说的替换了代码和脚本..但它不起作用...
代码应该粘贴在 $(document).ready(function() {});堵塞。喜欢
还在您的 jquery 脚本中添加 https:。你错过了。并确保您包含的所有文件都完美无缺。
更改后出现控制台错误的原因是什么？我可以看看你的代码截图吗？可能在某处与另一个 Js 代码冲突。
不推荐使用 //@ 指示 sourceMappingURL 杂注。改用 //# [了解更多] masterslider.min.js:10 主滑块错误：找不到#masterslider。 masterslider.min.js:9:61869 主滑块错误：找不到#masterslider5。 masterslider.min.js:9:61869 SyntaxError: missing ) in parenthetical community.html:867:228 TypeError: $(...).magnificPopup is not a function [了解更多] community.html:881:1 使用 getPreventDefault () 已弃用。请改用 defaultPrevented。 jquery-1.js:2:40278

【解决方案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>

【讨论】：