javascript - Image gallery with bootstrap, with bigger image -

i try make boostrap image gallery. if klick on image bigger 1 pop-uped.

i try 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 click on imgage , nothing happens.

so question is: how make bootstrap image gallery working?

thank you

this how see image:

first, remove modal out of foreach loop, otherwise you'll end multiple element same id of mymodal.

after change:

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

secondly, link tag should included in head section of document - shouldn't have impact on outcome.

lastly, , importantly, you'll need fix javascript targeting correct element, instead of li img:

javascript after change:

    $(document).ready(function () {         $('.row img.img-responsive').on('click', function () { // <-- notice selector change             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('');             });         });     }) 

note: used .img-responsive recommend create specific class targeting images going clickable.

---

also worth noting, should move event handler hidden.bs.modal outside click event handler so:

    $(document).ready(function () {         $('.row img.img-responsive').on('click', function () { // <-- notice selector change             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('');         });     }) 

---

the code use further clean up:

1. the modal reused enough warrant own variable
2. the image can updated before modal shown, can remove event handler

here's looks like:

final javascript:

$(document).ready(function () {     $mymodal = $('#mymodal'); // <-- since we're using in few places      $('.row img.img-responsive').on('click', function () {         var $this = $(this),             src = $this.attr('src'),             html = '<img src="' + src + '" class="img-responsive" />';          updatemodalbody($mymodal, html);          $mymodal.modal();     });      // resetting content of modal once it's hidden     $mymodal.on('hidden.bs.modal', function () {         updatemodalbody($mymodal, '');     });      // helper function update modal body     function updatemodalbody($modal, html) {         $modal.find('.modal-body').html(html);     } }) 

jsfiddle example