double click and fetch data from api

1. double click and get selected data 2. send data and fetch related image content from Flickr API

by janetyc

HTML

<div id="container">
    <p>dog cat book simle sky flower test abc. Today is a good day.</p></br>
    <input/>
    <textarea></textarea>
</div>
<div id="images">
</div>

CSS

img{ height: 100px; float: left; }
p { margin: 3px; }
input{
    margin: 3px;
    float: left;
}

JavaScript

$(document).ready(function() {
    $("#container input").dblclick(getData);
    $("#container textarea").dblclick(getData);
    $("#container p").dblclick(getData);
});

function getData(){
    var txt = getSelectedText();
    $("#images img").remove();
        
    $.ajax({
        type: "GET",
        url: "http://api.flickr.com/services/rest/?" +
         "method=flickr.photos.search&" +
         "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
         "text="+txt+"&" +
         "safe_search=1&" +  // 1 is "safe"                                                              
         "content_type=1&" +  // 1 is "photos only"                                                      
         "sort=relevance&" +  // another good one is "interestingness-desc"                              
         "per_page=20",
        dataType: "xml",
        success: function(req){
            $(req).find("photo").each(function(){
                var imgsrc=constructImageURL($(this));    
                $("<img/>").attr("src", imgsrc).appendTo("#images");
            });
                
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            alert("Error");
        }
    });
}
function getSelectedText() {
    if (window.getSelection) return window.getSelection().toString();
    else if (document.getSelection) return document.getSelection();
    else if (document.selection) return document.selection.createRange().text;
}

function constructImageURL(photo) {
  return "http://farm" + photo.attr("farm") +
      ".static.flickr.com/" + photo.attr("server") +
      "/" + photo.attr("id") +
      "_" + photo.attr("secret") +
      "_s.jpg";
}