2012-11-04 96 views
1

我有我的flickr圖庫編碼,但我希望能夠點擊作者的名字,頁面將重新加載與該作者的圖像。重新加載作者的Flickr請求

這裏是我當前的代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Outbrain Test Gallery</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="jquery.masonry.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function(){ 
    $('#flkr').masonry({ 
    // options 
    itemSelector : '.tiles', 
    isResizable: true, 
    }); 
}); 
</script> 
<script type="text/javascript">$(document).ready(function() { 
    $('<ul />').prependTo('#flkr'); 
    $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&jsoncallback=?', function(data) { 
    $.each(data.items, function(i,item) { 
     var squares = (item.media.m).replace('_m.jpg', '_q.jpg'); 
     if(i <= 20){ 
     $('<img/>').attr({ 
      alt: item.title, 
      src: squares, 
      height: '150', 
      width: '150' 
     }).appendTo('#flkr ul').wrap('<li class="tiles"><a href="' + item.link + '"></a><p class="title">' + item.title + '</p><p class="author"><strong>By:</strong> ' + item.author + '</p><p class="date"><strong>Uploaded: </strong>' + item.published + '</p></li>'); 
     } 
    }); 
    }); 
}); 
</script> 
</head> 

<body> 
<ul id="flkr"></ul> 
</body> 
</html> 

回答

0

如果你現在是爲你工作的方式,本質是那麼同樣的,你只需要改變你的$.getJSON網址以匹配之一的作者..並將網址傳遞給getJSON與傳遞任何其他變量相同。

您需要提出的唯一一件事就是獲取您想要展示的下一個畫廊的作者URL。我也$.empty()ul你先填補之前再附加到它。

現在就如何獲得下一個人的URL你自己。我確信你使用的URL有足夠的相似性,你可以使用它來硬編碼,並使用ID號或成員名稱,不知道flickr如何處理API的API,但總的來說,它們都是一樣的。只需使用正確的API,對於公共成員特定的Feed,其他應該相當直接。總之,你正朝着正確的方向前進。

+0

所有網址和作者都是即時生成的,因爲它從Flickr中提取最新的圖像,因此不會有任何硬編碼。 我看到它的方式是如何獲取'item-author'值,然後用getJSON url中的作者ID重新加載頁面。但是我不知道要這樣做,我有點新鮮jQuery的 – user1797325