簡體   English   中英

如何從JSON Flickr API將圖像加載到Bootstrap Modal中

[英]How to load image into Bootstrap Modal from JSON Flickr API

以下是我正在使用的代碼作為示例。 當我從Flickr提要中單擊每個圖像時,我希望能夠加載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>

將您的第二個腳本更改為此:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM