我正在获取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

10-07 14:19