"TypeError: $(...).magnificPopup is not a function" in nopCommerce 3.40

Question

以下代码显示图片缩略图并附加一个 magnificPopup 事件。它还在图片中嵌入图片。

几天前一切正常，但现在不知何故损坏了，现在我得到的只是一个 js 类型错误。

我尝试摆弄 jQuery.noConflict()，即使我没有添加任何新库或更新旧库，但那当然什么也没做。我知道这个问题与 magnificPopup 有某种关系，因为如果我简单地从代码中删除脚本，一切都会再次正常工作。

我想我在某个地方犯了一个简单的错误导致了这个，但我找不到任何东西而且我已经看了一整天。任何指针表示赞赏。

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

编辑 1：我在剃须刀顶部添加了 class 代码以显示如何加载 magnific-popup 库。

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

Answer 1

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

这很糟糕……真的很糟糕。如果这些插件开始干扰网站，即使我已经明确地将它们放在我的白名单中，那就是大错特错了。

抱歉打扰了。也许线程仍然对某人有帮助。

"TypeError: $(...).magnificPopup is not a function" in nopCommerce 3.40

"TypeError: $(...).magnificPopup is not a function" in nopCommerce 3.40

jquery

nopcommerce

magnific-popup