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就会按顺序填充。

这是不起作用的部分，给出错误：未捕获的TypeError：对象[object Object]没有方法'backstretch'

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

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

我尝试了很多东西，比如动态地将后伸图像的代码行写成字符串，将它们存储在数组中并放在ajax函数之外，进行评估：

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

但我总是得到“没有方法'后退'”错误信息。

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

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

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

1 个答案: