Question

我试图在我的MVC解决方案中实现lightbox。我已从NuGet存储库下载了该软件包，但我无法在我的解决方案中运行该软件包。

我已在BundleConfig中添加了此代码：

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

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

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

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

<script type="text/javascript">
$(document).ready(function () {
    $("#gallery a").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>

但是通过这些线条我无法用灯箱显示图像。它们在浏览器中作为普通图像打开。

对此问题的任何建议都将不胜感激。

先谢谢你。

Answer 1

问题是min.js 您无法将min版本的脚本包装在MVC包中。

因为它已经缩小了。

尝试改为 -

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

Answer 2

我删除了代码

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

然后以这种方式转换de anchor link：

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

如何实现Lightbox for MVC？

2 个答案: