Question

我已经通过jQuery使用location lat / lon参数创建了一个Instagram请求。我将返回所有关联的缩略图，最多可达100个，以及：

标题=标题，如果标题不为空（鼠标悬停时）
发布图片的用户。
发布日期图片。
standard_resolution.url的超链接（点击缩略图时）

以下请求会返回已发布的缩略图图像，用户和日期。但是，鼠标悬停并单击时，标题/标题和stardard_resolution.url的超链接不会显示。

我相信我的append语句语法错误，但无法弄清楚。这是代码和FIDDLE

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

Answer 1

HTML中存在一些小错误，img标记不在锚标记内，因此图像未链接，img“src”结束引号和“标题”开头引号不正确。如果您进行此更改，则可以正常工作：

$("#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，鼠标悬停图片有效。

Instagram API不显示标题和超链接

1 个答案: