Question

1. Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it.

2. Develop a server which can serve the file you developed in 3-4.

3. Add a plugin to the real jQuery library so that when you pass an array of elements to it, the function can move the elements forward and backward repeatedly. Then test your plugin by sending an array of images to it.

Answer 1

we can use jquery Ajax with flicker to get the picture taken from any place by the API method. flicker API is available for non commercial issue by the outside developers.some of the API methods we can use are

activity

flickr.activity.userComments flickr.activity.userPhotos  

auth

flickr.auth.checkToken flickr.auth.getFrob flickr.auth.getFullToken flickr.auth.getToken

auth.oauth flickr.auth.oauth.checkToken flickr.auth.oauth.getAccessToken

blogs flickr.blogs.getList flickr.blogs.getServices flickr.blogs.postPhoto  

and many other methods are there in the provided link.

https://www.flickr.com/services/api/

We API of Ficker is "flickr.collections.getInfo" as link "https://www.flickr.com

/services/api/flickr.collections.getInfo.html" which will provide info about the image but under the privacy rule.

before this, you need to SignUP on flicker as a developer in the given link above then, they provide you access token which is helping to secure data transferring and authentication purpose to access it.

Afterwards, you have to create code which is can communicate with Ficker. as I have shown below according to given requirements of JQuery with Ajax. Place of search.

​var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + $("#search").val();
$.ajax({
url: flickerAPI,
dataType: "jsonp", // jsonp
jsonpCallback: 'jsonFlickrFeed', // add this property
success: function (result, status, xhr) {
$.each(result.items, function (i, item) {
$("<img>").attr("src", item.media.m).appendTo("#outputDiv");
if (i === 5) {
return false;
}
});
},
error: function (xhr, status, error) {
console.log(xhr)
$("#outputDiv").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}
});

​

if You want to implement as function then

function JavaScriptFetch() {
var script = document.createElement('script');
script.src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + document.getElementById("search").value;;
document.querySelector('head').appendChild(script);
}
function jsonFlickrFeed(data) {
var image = "";
data.items.forEach(function (element) {
image += "<img src=\"" + element.media.m + "\"/>";
});
document.getElementById("outputDiv").innerHTML = image;
}