问题描述
以下代码显示图片的指甲并附加了magnificPopup事件.还将图片嵌入图片中.
The following code displays picture thumb nails and attaches a magnificPopup event. it also embeds a picture within a picture.
这一切在几天前都有效，但现在却以某种方式打破了，现在我得到的只是一个js类型错误.
This all worked a few days ago but now broken it somehow and now all i get is a js type error.
即使我没有添加任何新库或更新旧库，我还是尝试摆弄jQuery.noConflict()，但是当然什么也没做.我知道问题一定程度上与magnificPopup有关，因为如果我只是从代码中删除脚本，一切都会再次正常.
I have tried fiddling around with jQuery.noConflict() even though i have not added any new libs or updated old ones but that of course did nothing. i know that the problem has to do with magnificPopup somehow because if i simply remove the script from the code everything works fine again.
我想我在某个地方犯了一个简单的错误，导致此问题，但是我什么也找不到，我整天都在看.任何指针都值得赞赏.
I guess i made a simple error somewhere which leads to this but i can't find anything and i've looked all day. any pointers are appreciated.
@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>
我添加了razor类代码的顶部，以显示magnific-popup lib的加载方式.
Edit 1: I added the top of the razor class code to show how the magnific-popup lib is being loaded.
<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库的加载.这就解释了为什么它突然停止工作.插件必须已更新并开始引起问题.
I found the problem. It was SOME addon of mine. Probably noscript or request policy... I've yet to figure out which one prevented a single js library from being loaded. That explains why it suddenly stopped working. The addon must have been updated and started to cause issues.
这很糟糕...真的很糟糕.如果即使我已将这些插件明确列在白名单上，这些插件也开始干扰网站，则说明出现了严重错误.
This is bad... really bad. If those addons start to interfere with websites even though I have explicitly put them on my white list something is going terribly wrong.
对不起，所有的噪音.也许线程仍然可以帮助某人.
Sorry for all the noise. Maybe the thread still helps someone.
这篇关于"TypeError:$(...).magnificPopup不是函数"在nopCommerce 3.40中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！