"TypeError : $ (...). magnificPopup은 nopCommerce의 함수가 아닙니다."3.

Question

다음 코드는 그림 엄지 손톱을 표시하고 magnificPopup 이벤트를 연결합니다. 그것은 또한 그림 안에 그림을 삽입합니다.

이 모든 것은 며칠 전에 작동했지만 이제는 어떻게 든 부러졌고 지금은 모두 js 유형 오류입니다.

나는 새 라이브러리를 추가하지 않았거나 오래된 라이브러리를 추가하지 않았지만 아무 것도하지 않았지만 jQuery.noConflict()으로 주변을 둘러 보았습니다. 나는 문제가 magnificopopup과 어떻게 든 관계가 있다는 것을 알고있다. 왜냐하면 나는 단순히 코드에서 스크립트를 제거하면 모든 것이 다시 정상적으로 작동하기 때문이다.

나는이 문제를 일으키는 간단한 오류를 만들었지 만 나는 아무것도 찾을 수 없으며 하루 종일 보았습니다. 모든 포인터는 높이 평가됩니다.

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

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 관련 문제 없음^_^