Jquery &引用；TypeError:$（…）。放大弹出窗口不是函数；第3.40节

以下代码显示图片缩略图并附加放大弹出事件。它还将图片嵌入到图片中

这一切都工作了几天前，但现在打破了不知何故，现在我得到的是一个js类型的错误

我尝试过摆弄

jQuery.noConflict（）

，尽管我没有添加任何新的lib或更新旧的lib，但那当然没有任何效果。我知道这个问题与magnificspopup有关，因为如果我简单地从代码中删除脚本，一切都会恢复正常

我想我在某个地方犯了一个简单的错误，导致了这一点，但我什么也找不到，我找了一整天。任何指点都很感激

@model ProductDetailsModel
@using Nop.Core.Domain.Media
@using Nop.Core.Domain.Catalog;
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.Catalog;
@{
   Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
   Html.AddScriptParts("~/Scripts/jquery.magnific-popup.js");
}

...   

var backThumb = _pictureService.GetPictureUrl(lPictures[1], 100);
var backPic = _pictureService.GetPictureUrl(lPictures[1]);

<a class="thumb-popup-link" id="thumb-popup-link-back" title="@Model.PictureModels[0].Title">
    <img id="backThumb" alt="@Model.PictureModels[0].AlternateText" src="@backThumb" title="@Model.PictureModels[0].Title Back Thumb" />
</a>
<div id="backview" class="mfp-hide" style="position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);">
   <img id="backPic" src="@backPic" alt="@Model.PictureModels[0].AlternateText Back" />
   <div id="logoBox" style="position: absolute; top: 277px; width: 319px; left: 729px; height: 328px;">
       <img id="logoPic" src="/Themes/Motion/Content/img/logo.gif" alt="@Model.PictureModels[0].AlternateText Logo Box" title="logo" style="max-width: 320px; max-height: 330px; vertical-align: middle; position: absolute; top: 50%; left: 50%; margin-bottom: -50%; margin-right: -50%; transform: translate(-50%, -50%)" />
   </div>
</div>
<script type="text/javascript">
          $(document).ready(function () {
             $('#thumb-popup-link-front').magnificPopup({
                 items:
                 {
                     src: '#frontview',
                     closeOnContentClick: true
                 },
                 type: 'inline'
             });
          });
          $(document).ready(function () {
             $('#thumb-popup-link-back').magnificPopup({
                 items:
                 {
                     src: '#backview',
                     closeOnContentClick: true
                 },
                 type: 'inline'
             });
          });
</script>

@model-ProductDetailsModel
@使用Nop.Core.Domain.Media
@使用Nop.Core.Domain.Catalog；
@使用Nop.Core.Infrastructure；
@使用Nop.Web.Models.Catalog；
@{
AddCssFileParts（“~/Content/magnific popup/magnific popup.css”）；
AddScriptParts（“~/Scripts/jquery.magnific popup.js”）；
}
...   
var backThumb=_pictureseservice.GetPictureUrl（lPictures[1]，100）；
var backPic=_pictureseservice.GetPictureUrl（lPictures[1]）；
$（文档）.ready（函数（）{
$（“#拇指弹出链接前面”）.magnificPopup({
项目：
{
src:“#前视图”，
closeOnContentClick：true
},
键入：“内联”
});
});
$（文档）.ready（函数（）{
$（“#拇指弹出链接返回”）.magnificPopup({
项目：
{
src:“#后视图”，
closeOnContentClick：true
},
键入：“内联”
});
});

编辑1：我添加了razor类代码的顶部，以显示如何加载放大弹出库

编辑2：

    <link href="/Themes/Motion/Content/CSS/custom.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/styles.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/tables.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/mobile-only.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/480.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/768.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/980.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/CSS/forum.css" rel="stylesheet" type="text/css" />
<link href="/Themes/Motion/Content/css/footer.css" rel="stylesheet" type="text/css" />
<link href="/Content/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/fineuploader/fineuploader-4.2.2.min.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Styles/common.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Themes/Motion/Content/ajaxCart.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Styles/Ribbons.common.css" rel="stylesheet" type="text/css" />
<link href="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Themes/Motion/Content/Ribbons.css" rel="stylesheet" type="text/css" />


    <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/Scripts/public.common.js" type="text/javascript"></script>
<script src="/Scripts/public.ajaxcart.js" type="text/javascript"></script>
<script src="/Scripts/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="/Scripts/fineuploader/jquery.fineuploader-4.2.2.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/jquery.styleSelect.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.AjaxCart/Scripts/AjaxCart.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.core.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.userevents.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.draganddrop.min.js" type="text/javascript"></script>
<script src="/Scripts/kendo/2014.1.318/kendo.window.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Scripts/jquery.json-2.4.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Nop.Plugins.ProductRibbons/Scripts/ProductRibbons.min.js" type="text/javascript"></script>
<script src="/Plugins/SevenSpikes.Core/Scripts/footable.js" type="text/javascript"></script>
<script src="/Themes/Motion/Content/scripts/Motion.js" type="text/javascript"></script>

---

我发现了问题。这是我的一个插件。可能是noscript或请求策略。。。我还没有弄清楚是哪一个阻止了单个js库的加载。这就解释了为什么它突然停止工作。加载项必须已更新并开始导致问题

这很糟糕。。。真糟糕。如果这些插件开始干扰网站，即使我已经明确地把它们放在我的白名单上，那一定是出了大问题

---

抱歉这么吵。可能该线程仍有帮助。

您必须已删除导入的

magnificpoop

插件。（看，同样的错误：）是的。我刚做完。我添加了一些关于放大弹出加载过程的信息。好的，你告诉我们你告诉razor视图输出插件的位置，呈现的html是什么样子的？它是否有一个

标签指向该插件的正确路径？我已经在页面源代码的顶部添加了脚本实际加载的位置。我发现放大弹出窗口实际上根本没有加载。至少它不会出现在firefox调试器中。我不知道为什么会这样。我将在脚本前面添加脚本src。有一个类似的问题，在我的例子中，它只是被我的adblocker阻止了。