Flickr Photostream

Flickr Photostream

本文关键字：Photostream Flickr      更新时间：2023-09-26

我得到了在我的html页面中显示照片流的flickr代码：

<!-- 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更改为我的id49269824@N04

相关文章：