1

jQuery 経由で場所の緯度/経度パラメーターを使用して Instagram リクエストを作成しました。関連するすべてのサムネイルを最大 100 まで返します。

  1. タイトル = キャプション、キャプションが null でない場合 (マウスオーバー時)
  2. 画像を投稿したユーザー。
  3. 画像投稿日。
  4. standard_resolution.url のハイパーリンク (サムネイルをクリック)

以下のリクエストは、サムネイル画像、ユーザー、および投稿された日付を返します。ただし、タイトル/キャプションと stardard_resolution.url へのハイパーリンクは、マウスオーバーしてクリックしても表示されません。

私の追加ステートメントの構文が間違っていると思いますが、それを理解できません。ここにコードと フィドルがあります

(function ($) {
$(document).ready(function () {


    var count = "100";
    var access_token = "<REMOVED BY CATSHOES - IS THIS SUPPOSED TO BE SECRET?>";
    var access_parameters = {
        access_token: access_token
    };

    function grabImages(access_parameters) {
        var instagramUrl = "https://api.instagram.com/v1/media/search?lat=19.951204000000&lng=-155.860291000000&name=xxx&distance=400&callback=?&count=" + count;


        $.getJSON(instagramUrl, access_parameters, onDataLoaded);
    }

    function onDataLoaded(instagram_data) {
        if (instagram_data.meta.code == 200) {
            var photos = instagram_data.data;
            if (photos.length > 0) {
                for (var key in photos) {
                    var photo = photos[key];
                    var a_href = photo.images.standard_resolution.url;
                    var img_title = "";
                    var date = new Date(parseInt(photo.created_time) * 1000);

                    if (photo.caption != null) {
                        img_title = photo.caption.text;
                    }


                    $("#target").append('<a class="preview" href="' + a_href + "'  title='" + img_title + '" ></a> <img src ="' + photo.images.thumbnail.url + '"><div>\
                            ' + "Posted by: ", photo.user.full_name + '<br />\
                            ' + "Posted on: ", (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + '<br />\
                        </div />');
                }

            } else {
                $("#target").append("Currently no Instagram photos for this location.");
            }

        } else {
            var error = data.meta.error_message;
            $("#target").append('Photos for this location will display soon.  Instagram message: ' + error);
        }
    }
    grabImages(access_parameters);

});

})(jQuery);
4

1 に答える 1

1

HTML に小さな間違いがたくさんあります。img タグがアンカー タグ内にないため、画像がリンクされていません。また、img の "src" 終了引用符と "title" 開始引用符が正しくありません。この変更を行うと、正常に動作します。

$("#target").append('<a class="preview" href="' + a_href + '"  title="' + img_title + '" > <img src ="' + photo.images.thumbnail.url + '"></a><div>\
                            ' + "Posted by: ", photo.user.full_name + '<br />\
                            ' + "Posted on: ", (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + '<br />\
                        </div />');

ここで更新されたfiddle、マウスオーバー画像が機能します。

于 2013-09-13T18:56:56.103 に答える