CODEWITHSUNDEEP
javascriptjqueryflickrimage-gallery
Tyler Gerig
Tyler Gerig

Reputation: 33

Jquery/Javascript Flickr Gallery.. Need help badly

So i'm working on a project that basically takes the user's input as a "tag" of sorts for flicker and stores it, to then reuse it to make a gallery of the flicker images it pulls up from the tag. Now I think i've got mostly what i'm trying to do... but It's just not working 100%... or really at all because none of the images show up anymore, but here's my code

<head>
    <meta charset="utf-8" />
    <title>Image Gallery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="js/index.js"></script>

    <script>
        $(function() {

            $("#test").keyup(function(){
                var value = $(this).val()

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

</head>
<body>
    <form>
        Input a Tag for Flicker Images: <input id="test" type="text" />
    </form>

    <div id="images"></div>

</body>

It seems like it's something very simple but I JUST cannot figure out what i'm doing wrong..

Upvotes: 1

Views: 581

Answers (4)

osahyoun
osahyoun

Reputation: 5231

I tidied up a little your code and can get the following to work:

$(function() {

  var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      timer;

  var handle = function(data) {
                $.each(data.items, function(i,item){
                    $("<img/>").attr("src", item.media.m).appendTo("#images");
                    if ( i == 20 ) return false;
                });
              };

  var params = { tagmode: "any",
                 format: "json" };


  $("#test").keyup(function(){
    params['tags'] = $(this).val();
    window.clearTimeout(timer);
    timer = window.setTimeout(function(){        
      $.getJSON(url, params, handle);
    }, 500);
  });
});

I passed $.getJson as a callback to setTimeout, so you're not hitting flickr on every keystroke.

Upvotes: 1

xdevel
xdevel

Reputation: 204

Remove the double quotes around value; make tags:"value" as tags:value
Also check for parenthesis errors.and your code will run just fine..i made it to work..

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

you are missing a semi colon:

var value = $(this).val()

should be: 

var value = $(this).val();

I would also put a type="text/javascript" attribute on your <script> tags

one other thing, the closing tags (last two) are:

};
});

should be

}); ONLY

here is the rework:

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

HERE is a working example: http://jsfiddle.net/MarkSchultheiss/NFRsX/

Upvotes: 1

bang
bang

Reputation: 5221

Using the flickr api on client side requires jsonp. please have a look at question https://stackoverflow.com/a/5945676/24047

Upvotes: 0

Related Questions