我正在获取 flickr 代码以在我的 html 页面中显示照片流:
<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=s&layout=h&source=user&user=83420490%40N07"></script>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
但它只显示一行中的图像。我想要两张每行显示 4 张图片，有人可以帮我吗？
最佳答案
<html>
<head>
<title>Flick Test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var id='83420490%40N07';
var limit ='20';
// Flickr Photostream feed link.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" + id + "&lang=en-us&format=json&jsoncallback=?",
function(data){$.each(data.items,
function(i,item){
// Number of thumbnails to show.
if(i < limit){
// Create images and append to div id flickr and wrap link around the image.
$("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo("#flickr").wrap("<a href='" + item.media.m.replace('_m', '_z') + "' name='"+ item.link + "' title='" + item.title +"'></a>");
}
});
});
});
</script>
<style type="text/css">
#flickr{
width:340px;
overflow:hidden;
}
#flickr a{
width:75px;
float:left;
margin:10px 10px 0 0;
padding:0;
border:0;
}
</style>
</head>
<body>
<div id="flickr"></div>
</body>
</html>
这应该可以解决问题。您需要将更多图像上传到流中。测试将 id 更改为我的 49269824@N04
关于javascript - Flickr 照片流，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12105014/