CODEWITHSUNDEEP
javascriptjqueryjson
JoJo
JoJo

Reputation: 29

Get picture from flickr with json, and put the seleted picture in my new div

I need to be able to select one picture from my flickr search funtion, and insert it into my div id="imageContainer" And replace the with the new one.

Any suggestion how i can continue?

here's my fiddle.

https://jsfiddle.net/ov07gu5k/6/

<input type="text" id="flickrInput">
<button id="flickrSearch">Search Photos</button>
<div id="images"></div>    

<!--container where i want the selected image from flickr to be inserted and         replace test.jpg-->
<div id="imageContainer" class="center">
    <img src="pressonapicture.jpg"/>
</div>

Upvotes: 0

Views: 33

Answers (1)

Vincent
Vincent

Reputation: 348

you can change the src attribute of the image inside of imageContainer (I've added a class to the images appended to #images)

$(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 5,
        format: "json"
      },  
        function( data ) {
        $.each( data.photos.photo, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '" class="flickrimg"/>');
       });
     });
  });  

  $('#images').on('click','.flickrimg', function(){
    $('#imageContainer img').attr('src',$(this).attr('src'));
  });
});

fiddle here: https://jsfiddle.net/nba911nc/

Upvotes: 2

Related Questions