wordpress - 如何在 $.ajax 函数中使用 backstretch 插件方法

Question

我正在使用响应式 Wordpress 主题开发 Instagram 画廊，并发现了一些问题，希望得到帮助。

我使用 ajax 和 jsonp 获取 Instagram feed，并将结果附加到几个空 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 plugin以便图片具有响应性。为了使它工作，我只需要使用代码:

    $("#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 定义的 id (#instabox0, #instabox1, ...)这样 div 就会按顺序填充。

这是不起作用的部分，给出错误:未捕获的类型错误:对象 [object Object] 没有方法“backstretch”

因此，如果我在 $.ajax 函数之外使用 .backstretch 方法，它可以正常工作(但我无法获得 Instagram 图片的动态路径)。

如果我在 $.ajax 函数中使用 .backstretch 方法，则会出现上述错误。

我尝试了很多方法，例如将后拉伸(stretch)图像的代码行动态编写为字符串，将它们存储在数组中并在 ajax 函数外部，然后对其进行评估:

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

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

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

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

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

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

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

任何帮助将不胜感激。

Answer 1

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

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