Jquery 如何为MVC实现Lightbox？

我正试图在我的MVC解决方案中实现lightbox。我已经从NuGet存储库下载了这个包，但我无法在我的解决方案中运行它

我在BundleConfig中添加了以下代码：

bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
                    "~/Scripts/lightbox-2.6.min.js"));

在_layout.cshtml中，我添加了一行：

@Scripts.Render("~/bundles/lightbox")

然后，在我想显示lightbox的视图中，我添加了：

<script type="text/javascript">
$(document).ready(function () {
    $("#gallery a").lightBox();
});

最后，我在图像库中添加了以下行以显示lightbox：

<div id="gallery">
@foreach (var image in Model.Images)
{
    <a href="@Url.Content(ViewBag.Path + image.filename)">
        <img src="@Url.Action("Thumbnail", "Ad", new { width = 150, height = 150, filename = @image.filename})" alt="@image.filename" />
    </a>
}
</div>

但是用这些线我不能用lightbox显示图像。它们在浏览器中作为普通图像打开

任何关于这个问题的建议都将不胜感激

高级版谢谢。

问题是min.js 您不能将最小版本的脚本打包到MVC包中

因为它已经缩小了

试试看-

bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
                    "~/Scripts/lightbox-2.6.js"));

我已经删除了代码

<script type="text/javascript">
$(document).ready(function () {
    $("#gallery a").lightBox();
});
</script>

然后以这种方式变换解锚链接：

<a href="@Url.Content(ViewBag.Path + image.filename)" data-lightbox="image">

---

您在浏览器控制台中是否有任何错误？我得到的错误是Uncaught TypeError:$..lightBox不是函数请显示如何在html中呈现捆绑包。似乎您的库在htmlIn\u layout.cshtml中未被引用，我放在：@Scripts.Render~/bundles/lightbox您能把布局代码放在这里吗？还要检查jquery是否在此库之前加载现在javascript错误为：uncaughtreferenceerror:$is notdefined@Levimatt，请检查是否对捆绑中的jquery执行了相同的操作。如果没有，则尝试交换order或jquery。如果我将该行放在_layout.cshtml@Scripts.Render~/bundles/jquery中，仅放在_layout.cshtml的head标记中，我收到错误Uncaught TypeError:$..lightBox不是一个函数。请将注入脚本的代码行放入视图中好吗？我将脚本注入layout.cshtml而不是视图中检查拼写。看起来应该是$…lightBox，而不是$…lightBox