slide show with bootstrap

Question

I try to make a slide show with bootstrap, so that you slide through the images. But the images are not showing. Only the next and previous buttons are showing. I am using asp.net mvc5

this is the jquery:

$(document).ready(function () {
            $myModal = $('#myModal');

            $('.row img.img-responsive').on('click', function () { // <-- notice the selector change
                var $this = $(this),
                    src = $this.attr('src'),
                    html = '<img src="' + src + '" class="img-responsive" />';

                //Start 
                var index = $(this).parent('.row img.img-responsive').index();
                var html = '';
                html += html;
                html += '<div style="height:25px;clear:both;display:block;">';
                html += '<a class="controls next" href="' + (index + 2) + '">next &raquo;</a>';
                html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
                html += '</div>';
                //End 


                updateModalBody($myModal, html);
                $myModal.modal();
            });

            $myModal.on('hidden.bs.modal', function () {

                updateModalBody($myModal, '');
            });

            function updateModalBody($modal, html) {
                $modal.find('.modal-body').html(html);
                $modal.modal('hide');
            }

        })

        $(document).on('click', 'a.controls', function () {
            //this is where we add our logic
            var index = $(this).attr('href');
            var src = $('ul.row li:nth-child(' + index + ') img').attr('src');

            $('.modal-body img').attr('src', src);

            var newPrevIndex = parseInt(index) - 1;
            var newNextIndex = parseInt(newPrevIndex) + 2;

            if ($(this).hasClass('previous')) {
                $(this).attr('href', newPrevIndex);
                $('a.next').attr('href', newNextIndex);
            } else {
                $(this).attr('href', newNextIndex);
                $('a.previous').attr('href', newPrevIndex);
            }

            var total = $('ul.row li').length + 1;
            //hide next button
            if (total === newNextIndex) {
                $('a.next').hide();
            } else {
                $('a.next').show()
            }
            //hide previous button
            if (newPrevIndex === 0) {
                $('a.previous').hide();
            } else {
                $('a.previous').show()
            }


            return false;
        });

and this the css/html:

<div id="tabs-2">
    <div class="row">
        @foreach (var item in Model.LolaBikePhotos)
        {

            @model  ContosoUniversity.Models.UserProfile
            @*<div class="col-lg-3 col-md-4 col-xs-6 thumb">*@
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
                @*<a class="thumbnail">*@
                <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" />
            </div>

            <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div class="modal-dialog">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-content">
                        <div class="modal-body"></div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->

            </div>
    <!-- /.modal -->
        }
    </div>
</div>

Thank you

I have to edit this:

html += html;

But I dont know how to change that.

This is how you will see it:

Answer 1

To make this simple

If you look at the HTML from http://getbootstrap.com/javascript/#carousel

Copy the first one and add some Razor, this should generate a Carousel for you.

@model List<YOUR_MODEL_NAME>
    @{var j = 0;}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
     @for (var i = 0; i < Model.Count(); i++)
     {
       <li data-target="#carousel-example-generic" data-slide-to="@i"></li>
      }
  </ol>

<div class="carousel-inner" role="listbox">

 @foreach (var item in Model)
  {
   <div class="item @(j == 0 ? "active" : "")">
       <img src="@(string.Format("/Images/profile/{0}", item.ImagePath))" />
   </div>
  @(j = 1)
  }

</div>

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

EDIT

Following is an Example of a Thumbnails, when the thumbnails are clicked it will open a modal-dialog with a carousel in it.

I have created a JSFiddle of your scenario: http://jsfiddle.net/u7hxy3zc/1/

You should use the following code as an example and use in your View, Renaming all models and parameters.

Note: The following code has not been compiled May have syntax errors

// DISPLAY THUMBNAILS
<div class="col-md-2">
@for(int i =0; i < Model.Count(); i++)
  {
    <img src="@Model[i].ImageUrl" data-id="@i" data-action="image" />
  }        
</div>



.......... REMOVE HTML TO MAKE EXAMPLE CLEAR
... MODAL DIALOG START.................


<div class="modal-body">

...........CAROUSEL START............


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@for(var i = 0 ; i< Model.Count(); i++)
{
<li data-target="#carousel-example-generic" data-slide-to="@i"></li>
}
</ol>

<div class="carousel-inner" role="listbox">

@for(var i = 0; i < Model.Count(); i++)
{
<div class="item" data-image-id="@i">

  // DISPLAY i for Testing      
    @i     

   <img src="@Model[i].ImageUrl"  />
}
</div>

........... REMOVED REST OF CAROUSEL......(NEXT / PREV BUTTONS).........

.............CAROUSEL END...................

Then add this jQuery at the end to trigger the click event:

$('body').on('click', '*[data-action="image"]', function (e) {
    e.stopPropagation();
    var img = $(this);
    var currentId = img.data('id');
    $('#myModal').modal();
    var currentSlide = "*[data-slide-to='" + currentId + "']";
    var currentImagSlide = "*[data-image-id='" + currentId + "']";

    console.log(currentSlide);

    $("*[data-slide-to]").removeClass("active");
    $(".item").removeClass("active");

    var item = $('.carousel-indicators').find(currentSlide);
    var imgItem = $('.carousel-inner').find(currentImagSlide);
    console.log(item);
    item.addClass("active");
    imgItem.addClass("active");
});