Tags

,

  <!DOCTYPE html>
  <html>
  <title>JSONP</title>
  <head>
  <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js“>
  </script>
  <script>
  $(document).ready(function(){
  $(‘#idSubmit’).click(function() {
  displayTagImages($(‘#idText’).val());
  });
  });
   
  function displayTagImages(data) {
  var txtVal = data;
  $(‘#idText’).val(data);
  $(‘#image-container’).html(“”);
  $.ajax({
  type : ‘GET’,
  url : “http://api.flickr.com/services/feeds/photos_public.gne?tags=&#8221; + txtVal,
  data : “&lang=en-us&format=json&jsoncallback=?”,
  success : function(data) {
   
  $.each(data.items, function(i, item) {
   
  if (item.media.m) {
  var container = $(“<div/>”);
  var tagImgs = $(“<img/>”).attr(“src”, item.media.m).appendTo(container);
  var imgTitle = $(“<p/>”).html(‘<b>Title</b> : ‘ + item.title).appendTo(container)
  var imgTags = $(“<p/>”).html(‘<b>Tags</b> :’).appendTo(container);
  var imgTags1 = item.tags;
  var imgTags1 = imgTags1.split(‘ ‘);
  $.each(imgTags1, function(index, value) {
   
  var txt = imgTags1[index] ;
  $(‘<span style=”padding-left:4px;”/>’).html($(“<a>” + imgTags1[index] + “</a>”).attr(“href”, imgTags1[index])).appendTo(
  container).click(function(data) {
  displayTagImages(txt);
  return false;
  });
   
  });
  $(“#image-container”).append(container);
  if (i == 9)
  return false;
  }
  });
  },
  dataType : ‘jsonp’
  });
  }
  </script>
  </head>
  <body>
  <div id=”images”></div>
  <b>Enter Tag Name :</b> <input type=”text” name=”” id=”idText” value=”peacock”></input>
  <input type=”submit” id=”idSubmit” value=”Submit”></input>
  <div id=”image-container”></div>
  <span></span>
  </body>
  </html>
 
Advertisements