如何从JSON Flickr API将图像加载到Bootstrap Modal中

Question

Below is the code I am working with as an example. When I click each image from the Flickr feed I want to be able to load the Bootstrap Modal (which it does) but display that particular photo in the Modal (which it currently doesnt). I've tried numerous different things. But I am unable to get it to work. Example at http://jahax.com/ins/

    <div class="container">

        <h2 style="text-align: center;">Demonstration</h2>
        <p class="text-center">Demo of Bootstrap, jQuery & JSON API</p>
        <div class="row text-center">
        </div> 
        <div id="images" class="row text-center"> </div>
        </div>




    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="nyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Demo of Modal</h4>
      </div>
      <div class="modal-body">
        <img id="mimg" src="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        // Start jQuery Function
        $(document).ready(function(){                   

            // JSON API to access Flickr               
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=winter&format=json&jsoncallback=?", displayImages);

            function displayImages(data) {                                                                                                                                 
                var iCount = 0;                             
                var htmlString = "<div class=row>";                 

                $.each(data.items, function(i,item){
                    if (iCount < 18) {
                        var sourceSquare = (item.media.m).replace("_m.jpg", "_q.jpg");      

                        htmlString += '<a class="btn" data-toggle="modal" data-target="#myModal">';
                        htmlString += '<img src="' + sourceSquare + '">';
                        htmlString += '</a>';
                    }
                    iCount++;
                });     

            // HTML into #images DIV
            $('#images').html(htmlString + "</div>");

            // Close down the JSON function call
            }

        // End jQuery function  
        });
    </script>
    <script type="text/javascript">
        // Send Content to Bootstrap Modal
        $('img').on('click',function()
            {
                var sr=$(this).attr('src'); 
                $('#mimg').attr('src',sr);
                $('#myModal').modal('show');
            });
    </script>

Answer 1

Change your 2nd script to this:

    <script type="text/javascript">
        // Send Content to Bootstrap Modal
        $(document).on('click', 'img', function(){
              var sr=$(this).attr('src'); 
              $('#mimg').attr('src',sr);
              $('#myModal').modal('show');
        });
    </script>