bootstrap image gallery + ASP.net C# MVC
本文关键字:net MVC ASP image gallery bootstrap | 更新日期: 2023-09-27 17:55:00
问题是关于Bootstrap Image Gallery
blueimp.github.io/画廊随着扩展Bootstrap-Image-Gallery
现在的问题是:为什么我的代码不显示图像库,它显示为一个库
代码<<strong>画廊视图/strong>
@{
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">×</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>© @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.
这就是我得到的https://i.stack.imgur.com/pshjw.jpg这就是我想要的http://blueimp.github.io/Bootstrap-Image-Gallery/
希望你能理解我的问题:)/bootstrap.css",/site.css",/blueimp-gallery.min.css",/bootstrap-image-gallery.css "));
我知道现在回答太晚了,你错过了一些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>