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

我正在以响应式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（＃instabox0，＃instabox1，...）定义的ID，以便div将按顺序填充。

那是不起作用的部分，给出一个错误：
未捕获的TypeError：对象[object Object]没有方法'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照片，会更容易吗？
我可以创建脚本部分，但是当页面已加载后如何执行呢？

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

任何帮助将不胜感激。

最佳答案

我要做的是在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);
});

关于wordpress - 如何在$ .ajax函数内使用backstretch插件方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13544664/