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：我添加了剃刀类代码的顶部，以显示如何加载magnific-popup lib。

编辑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库被加载。这就解释了为什么它突然停止工作。插件必须已更新并开始导致问题。

这很糟糕......非常糟糕。如果这些插件开始干扰网站，即使我已经明确地将它们放在我的白名单上，也会出现严重错误。

对不起所有的噪音。也许线程仍然可以帮助某人。

＆＃34; TypeError：$（...）。magnificPopup不是函数＆＃34;在nopCommerce 3.40

1 个答案: