1

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

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

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

我相信我的追加语句语法是错误的，但无法弄清楚。这是代码和 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);
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 />');

这是更新的小提琴，鼠标悬停图像有效。

于 2013-09-13T18:56:56.103 回答