2012-08-24 124 views
1

我得到Flickr的代碼在我的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 --> 

但只在一排diplays圖像。我想兩個顯示每行4個圖像可以幫助我嗎?

回答

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

+0

http://jsfiddle.net/C7guQ/在jsfiddle中查看它的行動 –

+0

當我嘗試將限制更改爲更高的數字時,它仍然只顯示20.任何人都知道如何更改號碼 –

+0

這是一個flickr限制,我害怕。 –