http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?tags=soccer&tagname=any&format=json
tags = 에 검색하고자 하는 값을 넣음 (soccer - 축구)
[검색결과]
({
"title": "Uploads from everyone",
"link": "http://www.flickr.com/photos/",
"description": "",
"modified": "2011-10-28T11:01:18Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "DSCN0286",
"link": "http://www.flickr.com/photos/mglb/6288155449/",
"media": {"m":"http://farm7.static.flickr.com/6216/6288155449_36917da1a3_m.jpg"},
"date_taken": "2009-06-28T13:57:27-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/mglb/\">goretti crochet<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/mglb/6288155449/\" title=\"DSCN0286\"><img src=\"http://farm7.static.flickr.com/6216/6288155449_36917da1a3_m.jpg\" width=\"240\" height=\"180\" alt=\"DSCN0286\" /><\/a><\/p> ",
"published": "2011-10-28T11:01:18Z",
"author": "nobody@flickr.com (goretti crochet)",
"author_id": "50489611@N06",
"tags": ""
},
{
"title": "IMG_2546",
"link": "http://www.flickr.com/photos/victor_ng/6288155577/",
"media": {"m":"http://farm7.static.flickr.com/6101/6288155577_3ca491836c_m.jpg"},
"date_taken": "2011-10-21T15:23:53-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/victor_ng/\">Victor_Ng<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/victor_ng/6288155577/\" title=\"IMG_2546\"><img src=\"http://farm7.static.flickr.com/6101/6288155577_3ca491836c_m.jpg\" width=\"240\" height=\"160\" alt=\"IMG_2546\" /><\/a><\/p> ",
"published": "2011-10-28T11:01:23Z",
"author": "nobody@flickr.com (Victor_Ng)",
"author_id": "36008609@N07",
"tags": ""
},
.... 계속
위와 같이 복잡한 결과가 나온다.
이 나온 결과 값을 이용하여 플리처에 등록된 이미지가 자동으로 보여지는 걸 만들어 보자
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// 플리커에 등록된 이미지를 자동으로 가져옴
function downloadImg() {
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
{
tags:'soccer',
tagmode:'any',
format:'json'
},
//JSON에서 나온 데이터(data - 구조체 타입으로 리턴된)를 인자로 사용
function(data) {
// 첫번째 자료의 media의 m의 값을 가져옴 - 이걸 img태그에 넣음
$('img').attr('src', data.items[1].media.m);
$('#one').attr('src', data.items[2].media.m);
$('#two').attr('src', data.items[3].media.m);
$('#three').attr('src', data.items[4].media.m);
}
);
}
$(document).ready(function() {
$('button').click(function() {
downloadImg();
});
});
</script>
</head>
<body>
<button>download</button>
<div id='images'></div>
<img src='' alt=''/>
<img src='' alt='' id='one'/>
<img src='' alt='' id='two'/>
<img src='' alt='' id='three'/>
getJSon에는 맨위에 적힌 플리처 API중 callback=?까지만 작성하고 이후는 적어주지 않는다.
그리고 { } 내에 관련 tags, tagmode, format을 작성한다.
이렇게해서 나온 결과는 data의 구조체로 저장이 되고 이 결과 값을 가지고 활용한다.
data.item[불러올 데이터].media.m
플리처 API의 결과 값에 media의 m에 이미지 경로값이 있으니 이 값을 가져다가
html태그에 접목시켜서 활용한다.
[결과]
[향상된 스크립트]
function(data) {
$.each(data.items, function(i, item) {
// 아이디 images 자식으로 들어감 .attr에 .attr을 주어서 2가지 속성 부여 가능
$('<img/>').attr('src', item.media.m).attr('alt', item.author).appendTo('#images');
$('<p></p>').text(item.author).appendTo('#images');
if(i==2) {
return false
}
});
아이디가 images인 객체에 <img>와 <p>태그를 붙여줌
특정 갯수 만큼 반복 시키기 위해 each함수 사용 (3개만 가져오기)
[결과]
'IT 관련 > Html5' 카테고리의 다른 글
| JQuery Canvas를 이용한 무지개 만들기 (0) | 2011.11.03 |
|---|---|
| 웹사이트 소스 가져오기 (JSON, Ajax) (0) | 2011.10.28 |
| JQTouch 활용2 (0) | 2011.10.15 |
| JQTouch 활용 (0) | 2011.10.14 |
| JQuery 활용 (0) | 2011.10.13 |