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

下面是我正在工作的代码作为一个例子。当我点击Flickr feed中的每张图片时，我希望能够加载Bootstrap Modal(它确实如此)，但在Modal中显示特定的照片(它目前没有)。我尝试过很多不同的东西。但我无法让它工作。示例: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>