I try to make a boostrap image gallery. SO if you klick on an image a bigger one will be pop-uped.

I try it like this(html/css):

```
<div id="tabs-2">
    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />

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

            @model  ContosoUniversity.Models.UserProfile

            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">

                <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" />

            </div>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

        }
    </div>

</div>

```

javascript:

```
@section scripts{
    <script>
        $(document).ready(function () {
            $('li img').on('click', function () {
                var src = $(this).attr('src');
                var img = '<img src="' + src + '" class="img-responsive" />';
                $('#myModal').modal();
                $('#myModal').on('shown.bs.modal', function () {
                    $('#myModal .modal-body').html(img);
                });
                $('#myModal').on('hidden.bs.modal', function () {
                    $('#myModal .modal-body').html('');
                });
            });
        })

    </script>
}

```

But if I click on a imgage , nothing happens.

so my question is: how to make the bootstrap image gallery working?

Thank you

This is how you will see the image:

![enter image description here](https://i.stack.imgur.com/RAWIJ.png)