kyle'sBlog: 5月 2014

2014年5月21日星期三

參考資料：

範例：

https://picasaweb.google.com/data/feed/api/user/105327625201270500765/albumid/6015020452690553217?kind=photo&alt=json
https://photos.googleapis.com/data/feed/api/user/105327625201270500765/albumid/6015020452690553217?kind=photo&alt=json

	<html>
	<head>
	<title></title>
	</head>
	<body>
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
	$(function () {
	var rssurl = 'https://picasaweb.google.com/data/feed/api/user/105327625201270500765/albumid/6015020452690553217?kind=photo&alt=json';
	ShowPic(rssurl);;
	});
	function ShowPic(rssurl) {
	$.ajax({
	type: 'GET',
	url: rssurl,
	success: function (data) {
	$.each(data.feed.entry, function (i, item) {
	$('#images').append("Album Photos: <br />");
	//Photo URL
	$.each(item.media$group.media$content, function (i, item) {
	var photo_URL = item.url;
	$('#images').append("Image Photo URL: <br/><img src='" + photo_URL + "'/><br />");
	});
	//Thumbnail URL
	$.each(item.media$group.media$thumbnail, function (i, item) {
	var photo_Thumb_URL = item.url;
	$('#images').append("Image Thumbnail URL: <br/><img src='" + photo_Thumb_URL + "'/><br />");
	});
	//Photo Title
	var photo_Title = item.media$group.media$title.$t;
	$('#images').append("Image Photo_Title: " + photo_Title + '<br />');
	//Photo Description
	var photo_Description = item.media$group.media$description.$t;
	$('#images').append("Image Photo Description: " + photo_Description + '<br /><br />');
	});
	},
	dataType: 'json',
	async: false

	});

	}

	</script>
	<br />
	<div id="images">
	</div>

	</body>
	</html>

view raw GetPicasaData.html hosted with ❤ by GitHub

DEMO：

參考連結：

範例：

	<html>
	<head>
	<title></title>
	</head>
	<body>
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://sdepold.github.io/jquery-rss/src/jquery.rss.js"></script>
	<script>
	jQuery(function ($) {
	var rssurl = 'https://api.flickr.com/services/feeds/photos_public.gne?id=113975074@N04';
	//alert(rssurl);
	$("#rss-styled").rss(rssurl, {
	limit: 1000,
	filter: function (entry, tokens) {
	$.each(tokens, function (i, item) {
	if (i == "body") {
	var obj = $('<div/>').append(item);
	$("#rss-styled").append(obj.find('p').eq(1).html());
	}

	});
	}
	}).show();

	});

	</script>
	<div id="rss-styled">
	</div>
	</body>
	</html>

view raw GetFilckrRss.html hosted with ❤ by GitHub

DEMO：

金鑰的部分設定好，網址也對應成功。

但是登入時，發生此錯誤訊息。

檢查了一下設定Status&Review，其中的選項要設為YES，才可以正常使用此App。

相關連結：

透過setInterval指令來定時執行某個function。

Source Code：
路口CCTV影像，每隔一秒刷新。

	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript">


	function show() {
	$('#imgCamera').attr('src', 'http://cctv4.kctmc.nat.gov.tw/axis-cgi/jpg/image.cgi?camera=198');
	}
	$(function () {
	setInterval(show, 1000);
	});
	</script>
	</head>
	<body>
	<img id='imgCamera' style="width:400px" alt="*"/>
	</body>
	</html>

view raw CCDCamera.html hosted with ❤ by GitHub

DEMO：

參考連結：