[英]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">×</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.