2

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">&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>

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>&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>

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

Siguza
  • 21,155
  • 6
  • 52
  • 89
Jesper
  • 119
  • 1
  • 3
  • 15
  • Did you solve this? I'd like to use blueimp image gallery too and it would help me a lot :) – dak Apr 19 '14 at 14:19
  • @Dak I seperated the blu imp Gallery part from the bundles, why that worked I cant answer but it made it work. – Jesper May 07 '14 at 06:56
  • Hey there what does your gallery look like now you got it to work. I'm also struggling with this, can you give me any tips? – Paul Sep 11 '14 at 20:38

1 Answers1

2

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

// 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>
Ali Adravi
  • 21,707
  • 9
  • 87
  • 85