Jquery / Javascript Галерея Flickr .. Нужна помощь сильно - PullRequest
Новая
       19

Jquery / Javascript Галерея Flickr .. Нужна помощь сильно

1 голос
/ 08 февраля 2012

Итак, я работаю над проектом, который в основном воспринимает вводимые пользователем данные в виде «тега» для мерцания и сохраняет его, а затем повторно использует для создания галереи изображений мерцания, которые он извлекает из тега. Теперь я думаю, что у меня есть в основном то, что я пытаюсь сделать ... но это просто не работает на 100% ... или на самом деле вообще, потому что ни одно из изображений больше не появляется, но вот мой код 

<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>

Кажется, это что-то очень простое, но я ПРОСТО не могу понять, что я делаю неправильно ..

Ответы [ 4 ]

1 голос
/ 08 февраля 2012

Я немного прибрался в вашем коде и могу заставить работать следующее: 

$(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);
  });
});

Я передал $ .getJson в качестве обратного вызова для setTimeout, так что вы не нажимаете flickr при каждом нажатии клавиши.

1 голос
/ 08 февраля 2012

Удалить двойные кавычки вокруг значения;сделать tags:"value" as tags:valueТакже проверьте наличие ошибок в скобках. И ваш код будет работать нормально ... я заставил его работать ..

1 голос
/ 08 февраля 2012

вам не хватает точки с запятой: 

var value = $(this).val()

должно быть: 

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

Я бы также добавил атрибут type="text/javascript" к вашим <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;
            });
        });
    });
});

ЗДЕСЬ рабочий пример: http://jsfiddle.net/MarkSchultheiss/NFRsX/

0 голосов
/ 08 февраля 2012

Для использования flickr api на стороне клиента требуется jsonp.пожалуйста, посмотрите на вопрос https://stackoverflow.com/a/5945676/24047

...