我的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 :(得分:0)
如果你现在拥有它的方式适合你,那么本质是相同的,你只需要更改你的$.getJSON
网址以匹配作者的网址..并将网址传递给getJSON
与传递任何其他变量相同。
您需要提出的唯一方法是获取要显示的下一个图库的作者URL。我还会$.empty()
您最初填写的ul
,然后再将其添加到其中。
现在,您将如何获得由您决定的下一个人URL。我确定您将使用的URL中有足够的相似性,您可以对其进行硬编码并使用ID号或成员名称,不确定flickr如何处理其API的URL,但一般来说它都是相同的。只需使用正确的API,对于公共成员特定的提要,其余的应该是相当直接的。总之,你正朝着正确的方向前进。