I made a little application in JavaScript with the Flickr API. It returns the ten most recent photos of a specific tag. When Searching for a tag it brings one the photos, everything fine till here. At the next search it keeps the old photos and just adds new ones. It was planned to "delete" the older photos. Visit: https://jsfiddle.net/79uueuso/
var thread = null;
function findTags(input) {
console.log(input);
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
// Get the vaules of the Flickr-API
$.getJSON(flickerAPI, {
tags: input, // input = value of the input text field
tagmode: "all",
format: "json"
})
// get 10 pictures
.done(function (data) {
$.each(data.items, function (i, item) { // put them in a <img> with thumbnail of bootstrap / append them to the <div> with id="images"
$("<img class='img-thumbnail'>").attr("src", item.media.m).appendTo("#images");
if (i === 9) {
return false;
}
});
});
}
// Get the Value of the text input field while you type!
// The function reads the value 500ms after your last typing (.keyup)
$('#tag').keyup(function () {
clearTimeout(thread);
var $this = $(this);
thread = setTimeout(function () {
findTags($this.val())
}, 750);
});
Originally it was like this, Visit: https://jsfiddle.net/ckdr2Lwx/
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
tags: "Schloss Heidelberg",
tagmode: "any",
format: "json"
})
.done(function (data) {
$.each(data.items, function (i, item) {
$("<img>").attr("src", item.media.m).appendTo("#images");
console.log("Hallo die " + [i] + ".");
if (i === 9) {
return false;
}
});
});
})();
I solved my problem. I added a function which removes the input value, after that when there is no input value the recent photos will be deleted and the search does not start from scratch. First you have to type something in the input field. Here goes the additional code I used.
// when pressing backspace once, the whole input field gets cleared.
$('html').keyup(function(e){
if(e.keyCode == 8) {
var photo = document.getElementById("tag");
photo.value = "";
var photoDel = $(".img-thumbnail"); // All pictures of the last search will be deleted.
photoDel.remove();
}
});
if(input == ""){ // The search only works now when the input field is not empty-
return false;
}else {
added on top of
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
// Get the vaules of the Flickr-API