Search code examples
javascriptjqueryhtmlimageflickr

Using javascript to pull URL from an image


So i've made a small script which uses the Flickr API to search for the tags on the website and it will return an image containing that tag, that all works fine.

My problem is when i try to get the URL of an image, not sure how i would do it as i've seen a few different approaches but none have really helped me, basically i want to click the save image button and it will print the URL of the current image that is on display.

I have a demo here http://jsfiddle.net/u8544ko4/

HTML:

                <title>get image</title>
<body>
    <form>
    <input type="text" id="search" placeholder="Enter Tag ... E.g. Cars">

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <input type="button" id="button" value="Search For Image">
    <input type="button" id="sbutton" value="Save Image">
    </form>
    <br>

CSS

img{height:auto; float: left;}

Javascript

$(document).ready(function () {
            $("#button").click(function () {
                $("#images").empty();


                var search1 = document.getElementById("search").value;

                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                        {
                            tags: search1,
                            tagmode: "any",
                            format: "json"
                        }, function (data) {
                    $.each(data.items, function (i, item) {
                        $('<img/>').attr("src", item.media.m).appendTo('#images');
                        if (i === 0)
                            return false;

                    });


                });

            });
        });  

Thanks For reading ! Any help is appreciated !


Solution

  • If I understand you correctly.

    $(document).ready(function() {
      $("#button").click(function() {
        $("#images").empty();
    
    
        var search1 = document.getElementById("search").value;
    
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
          tags: search1,
          tagmode: "any",
          format: "json"
        }, function(data) {
          $.each(data.items, function(i, item) {
            $('<img/>').attr("src", item.media.m).appendTo('#images');
            $("#sbutton").prop('disabled', false);
            if (i === 0)
              return false;
    
          });
    
    
        });
    
      });
    
      $("#sbutton").click(function() {
        var iImage = $("#images img");
        $("#images p").empty();
        iImage.after("<p>" + iImage.attr("src") + "</p>");
      });
    });
    img {
      height: auto;
      float: left;
    }
    <title>get image</title>
    
    <body>
      <form>
        <input type="text" id="search" placeholder="Enter Tag ... E.g. Cars">
    
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    
        <input type="button" id="button" value="Search For Image">
        <input type="button" id="sbutton" value="Save Image" disabled>
      </form>
      <br>
      <div id="images"></div>