The following code displays picture thumb nails and attaches a magnificPopup event. it also embeds a picture within a picture.
This all worked a few days ago but now broken it somehow and now all i get is a js type error.
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> Edit 1: I added the top of the razor class code to show how the magnific-popup lib is being loaded.
Edit 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>