kyle'sBlog: 透過Jquery取得GooglePicasa相簿圖片(JSON)

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：

kyle'sBlog