Welcome, Old Sport!

本地调用Flickr订阅内容

by ilikecss ON 2012/08/16 29324

本地调用Flickr订阅内容Flickr相信许多人不陌生,Flickr也提供了幻灯片播放模式,可以通过swf或html方式来分享你的照片画廊。这两天续费了Flickr,也看到了不少Flickr的玩法,在这里介绍一个本地调用你的Flickr订阅内容的方法。本地对画像打开做了修饰,使用了Colorbox这个jQuery插件,使画廊更具美观。

Step1. 创建HTML

<!doctype html>

<html>

	<head>
    
		<title>Call Local Flickr Feed</title>
        
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/colorbox.css" />

	</head>

	<body>

</body>

</html>

Step2. 插入jQuery和脚本包

var params = {

	id: '42044697@N04', // my Flickr User ID

	format: 'json',

	jsoncallback: '?'

},

feedURL = 'http://api.flickr.com/services/feeds/photos_public.gne',

feedQuery = decodeURIComponent($.param(params));

function buildLinks(json) {

	var photo,

	$links = $(), 

	$thumb,

	$anchor;



	while ( photo = json.items.pop() ){

		$anchor = $('<a/>').attr({

			// get the medium-large size photo

			href: photo.media.m.replace('_m', '_z'),

			title: photo.title

		});



		$thumb = $('<img/>').attr({

			// get the small-square size thumbnail photo

			src: photo.media.m.replace('_m', '_s'),

			alt: photo.title

		}).appendTo($anchor);



		$links = $links.add($anchor);

	}



	$links.colorbox({rel:'flickr', speed:0});



	// Wait until the DOM has loaded before trying to append to the body

	$(document).ready(function () {
								
		$('body').append($links);
	});
}
$.getJSON(feedURL   '?'   feedQuery, buildLinks);
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>

控制输出图片数量,请把以下绿色代码替换:

while ( photo = json.items.pop() ){ 替换下面
for(var i = 0; i < 4 && json.items[i]; i  ){
photo = json.items[i];

关于42044697@N04这个Flickr帐号,可以通过进入你的相片集随便选择一个相册,然后点选幻灯片播放,在如下图所示位置点选”显示资讯”后在地址栏上可以找到。

显示资讯

4条评论
  1. #1

    Marvin说道:

    这个好啊~




TOP