[asp.net-mvc]引导图像画廊 + ASP.net C# MVC

发布时间: 2016/10/9 6:03:35
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

问题是在引导图像画廊方面

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"));

解决方法 1:

我知道就太晚了,回答,你错过了一些 CSS 文件,css 文件的完整列表和 JavaScript 文件请参阅我的文章

在 asp.net mvc 中具有多个文件和大小的图像画廊

// 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>
赞助商