引导图像库 + ASP.net C# MVC

Question

问题是关于 Bootstrap Image Gallery

blueimp.github.io/Gallery 随着扩展 引导图像库

现在的问题：为什么我的代码没有显示图片库，它显示为画廊

守则 图库视图

   @{
        ViewBag.Title = "Gallery";
    }
    <h2>@ViewBag.Title.</h2>

    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="links">
        <a href="~/Pictures/12.jpg" title="CityPicture" data-gallery>
            <img src="~/Pictures/12.jpg" width="100"/> 
        </a>
        <a href="~/Pictures/694x297_uluru_australia.jpg" title="CityStreet" data-gallery>
            <img src="~/Pictures/694x297_uluru_australia.jpg" width="100" />
        </a>
        <a href="~/Pictures/ausmap.jpg" title="WaterSpring" data-gallery>
            <img src="~/Pictures/ausmap.jpg" width="100" />
        </a>    
    </div>

代码_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Australia</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")



</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Australia", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Gallery", "Gallery", "Home")</li>
                    <li>@Html.ActionLink("MapLocation", "MapLocation", "Home")</li>
                </ul>
                @*@Html.Partial("_LoginPartial")*@
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()

        @RenderSection("Scripts", required: false)
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Jesper Kiel Jensen</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @*@Scripts.Render("~/bundles/bootstrap")*@
    @Scripts.Render("~/bundles/googlemaps")
    @Scripts.Render("~/bundles/bootstrap")
    @*@Scripts.Render("~bundles/boostrapGallery")*@
    @RenderSection("scripts", required: false)
</body>
</html>

代码捆绑包

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
         "~/Scripts/bootstrap.js",
         /blueimp-gallery.min.js",
         /bootstrap-image-gallery.js",
         /respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(I was unsure of how much code, I was to ctrl+v , so here is all of it.

这就是我得到的http://imgur.com/jBHHgKc 这就是我想要的http://blueimp.github.io/Bootstrap-Image-Gallery/

希望你能理解我的问题 :) /bootstrap.css", /site.css", /blueimp-gallery.min.css", /bootstrap-image-gallery.css"));

Answer 1

我知道现在回答为时已晚，您错过了一些 CSS 文件，完整的 css 文件和 JavaScript 文件列表请参阅我的文章

Image gallery in asp.net mvc with multiple file and size

// CSS files
<link rel="stylesheet" 
    href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" 
    href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-image-gallery.min.css">

// JavaScript files
@Scripts.Render("~/bundles/jquery")
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="~/Scripts/bootstrap-image-gallery.min.js"></script>