2

我正在开发一个响应式 Wordpress 主题的 Instagram 画廊，并发现了一些我需要帮助的问题。

我正在使用 ajax 和 jsonp 获取 Instagram 提要，并将结果附加到几个空 div 中。我正在使用的简化代码是：

    $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/accesstoken",
      success: function(data) {
          for (var i = 0; i < 7; i++) {
                          var boxitem = "#instabox" + i;
              $(boxitem).append("<a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.low_resolution.url +"'/></a>");
    }
    }

此脚本将每张 Instagram 图片分配给特定的 div（“id=instabox1”、“id=instabox2”等）。这段代码运行良好。

现在我想使用 jQuery Backstretch 插件使图片具有响应性。为了使它工作，我只需要使用代码：

    $("#instabox0").backstretch("http://server/instagrampicture.jpg");

这行代码工作正常，以便 backstretch.js 正确加载并正常工作。

所以这是我遇到的问题。我想从 Instagram 获取最新照片，并通过将它们动态分配给 backstretch 插件来使它们具有响应性。我尝试的第一件事是在成功部分中调用 ajax 函数中的 backstretch 方法：

    $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/accesstoken",
      success: function(data) {
          for (var i = 0; i < 7; i++) {
                      var boxitem = "#instabox" + i;
          $(boxitem).backstretch(data.data[i].images.low_resolution.url);             
    } }

鉴于 data.data[i].images.low_resolution.url 给出了图像的正确路径，我认为这会将 backstretch 方法应用于 boxitem (#instabox0, #instabox1, ...) 定义的 id，以便div 将按顺序填充。

那是不起作用的部分，给出错误： Uncaught TypeError: Object [object Object] has no method 'backstretch'

因此，如果我在 $.ajax 函数之外使用 .backstretch 方法，它可以正常工作（但是我没有得到 Instagram 图片的动态路径）。

如果我在 $.ajax 函数中使用 .backstretch 方法，它会给出提到的错误。

我已经尝试了很多事情，比如动态地将后伸图像的代码行编写为字符串，将它们存储在数组中并在 ajax 函数之外，对其进行评估：

    strScript = '$("#instabox' + i + '").backstretch("' + data.data[i].images.low_resolution.url + '");';
    eval(strScript);

但我总是收到“没有方法'backstretch'”错误消息。

我还创建了一个脚本部分，并使用适当的后伸动态生成的代码填充它，例如：

    <script>
    $("#instabox0").backstretch("http://server/instagrampicture0.jpg");
    $("#instabox1").backstretch("http://server/instagrampicture1.jpg");
    </script>

但是当页面加载时它不会执行。

有什么帮助吗？如何在 Ajax jsonp 函数中使用 .backstretch 方法？如果我使用不同的方法来获取 Instagram 照片会更容易吗？我可以创建脚本部分，但是，当页面已经加载时，如何执行它？

非常感谢，我不是专业的程序员，所以我有点卡在这个问题上。我可能忽略了一些对你们来说显而易见的事情，但我已经尝试解决它好几天了。

任何帮助将不胜感激。

4

1 回答 1

0

我要做的是在 Ajax 循环内构建一个图像 URL 数组，您可以在调用时在 .backstretch() 工作的外部使用这些 URL。

var images = [];
success: function(data) {
    for (var i = 0; i < 7; i++) {
        images.push(data.data[i].images.low_resolution.url); 
    }            
}
$.each(images, function(index, value) {
    var boxitem = "#instabox" + index;
    $(boxitem).backstretch(value);
});
于 2013-03-05T15:10:31.933 回答