The question is in regard of Bootstrap Image Gallery
blueimp.github.io/Gallery With the extention Bootstrap-Image-Gallery
Now to the Question: Why is it that my code doesnt show the Image-Gallery, it does show it as a gallery
The Code Gallery View
@{
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>
The Code _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>
The Code Bundles
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.
This is what I get https://i.stack.imgur.com/pshjw.jpg This is what I want http://blueimp.github.io/Bootstrap-Image-Gallery/
Hope you understand my question :) /bootstrap.css", /site.css", /blueimp-gallery.min.css", /bootstrap-image-gallery.css"));
I know it is too late to answer, you missed some CSS files, for complete list of css files and JavaScript files see my article
Image gallery in asp.net mvc with multiple file and size