While blogging, I keep needing images that I can use. Though I have no issue using proprietary one from google, however it would be best if I could put flickr to some use and develop an app that searches the flickr.com and returns me images of my choice. It's jquery and JSOn that I have used. Thanks google!
here is the code
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; width: 100px; margin: 5px 5px 5px 5px; float: left; border: solid black}</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function fetchJSON() {
var tag = document.getElementById('input');
// document.getElementByID("input");
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: tag.value,
tagmode: "any",
format: "json"
},function(data) {
$.each(data.items, function(i,item){
$('#images').append('<a href="'+item.media.m+'"><img src="'+item.media.m+'"></a>val='+i+'');
//alert(item.media.m);
//if ( i == 20 ) return false;
//if ( i == 19 ) fetchJSON();
});
});
}
</script>
</head>
<body>
<input type="text" id='input'>
<input type="submit" value="GO" onclick="javascript:fetchJSON()">
<div id="images"></div>
</body>
</html>
TODO : simple UI tricks.
1. turn off the GO button once it is hit
2. make something like twistori.com with flickr images
here is the code
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; width: 100px; margin: 5px 5px 5px 5px; float: left; border: solid black}</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function fetchJSON() {
var tag = document.getElementById('input');
// document.getElementByID("input");
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: tag.value,
tagmode: "any",
format: "json"
},function(data) {
$.each(data.items, function(i,item){
$('#images').append('<a href="'+item.media.m+'"><img src="'+item.media.m+'"></a>val='+i+'');
//alert(item.media.m);
//if ( i == 20 ) return false;
//if ( i == 19 ) fetchJSON();
});
});
}
</script>
</head>
<body>
<input type="text" id='input'>
<input type="submit" value="GO" onclick="javascript:fetchJSON()">
<div id="images"></div>
</body>
</html>
TODO : simple UI tricks.
1. turn off the GO button once it is hit
2. make something like twistori.com with flickr images
Comments
Post a Comment