How to use backstretch plugin method inside a $.ajax function

Question

I´m working on an Instagram gallery in a responsive Wordpress theme and have found some issues I would like some help with.

I´m getting the Instagram feed using ajax and jsonp and appending the result in several empty divs. The simplified code I'm using is:

    $.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>");
    }
    }

This script assigns each Instagram picture to a specific div ("id=instabox1", "id=instabox2" and so on). This piece of code is working fine.

Now I want to use jQuery Backstretch plugin so that the pictures are responsive. To make it work I just need to use the code:

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

This line of code is working fine so that backstretch.js is properly loaded and working fine.

So here´s the issue I´m having. I want to get the latest photos from Instagram and make them responsive by dynamically assigning them to the backstretch plugin.First thing I tried is calling the backstretch method in the ajax function, in the success section:

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

Given that data.data[i].images.low_resolution.url gives the correct path for the image, I thought this would apply the backstretch method to the id defined by boxitem (#instabox0, #instabox1, ...) so that the divs would be populated in order.

That is the part that doesn't work, giving an error: Uncaught TypeError: Object [object Object] has no method 'backstretch'

So, if I use the method .backstretch outside the $.ajax function it works fine (but then I don't get the dynamically paths for the Instagram pics).

If I use the method .backstretch inside the $.ajax function it gives the error mentioned.

I've tried many things like dynamically writing the lines of code for the backstretch images as a string, storing them in an array and outside the ajax function, evaluating it:

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

but I always get the "has no method 'backstretch'" error message.

I've also created a script section and populated it with the proper backstretch dynamically generated code like:

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

but then it is not executed when the page is loaded.

Any help? How can I use the .backstretch method inside the Ajax jsonp function? Would it be easier if I use a different approach to get the Instagram photos? I can create the script section but then, how can I execute it when the page has already been loaded?

Thanks very much, I'm not a professional programmer so I'm a bit stuck with this issue. I may have overlooked something obvious for you guys but I've been trying to solve it for days.

Any help would be greatly appreciated.

I can't see a reason to use jQuery for responsive images, when the actual `responsive theme` provides native CSS support. — Ohgodwhy, Nov 24 '12 at 19:22
I'm using using a responsive framework to code the theme: [http://foundation.zurb.com/](Foundation by Zurb). What it does is scale up or down the image but if the width/height ratio of the div is different to that from the image, then you get some annoying empty space. What the jQuery plugin backstretch does is take care of that and stretch the image so that it always covers the container div regardless of its width/height ratio. — albrivero, Nov 24 '12 at 19:39
Do you have the box items existing already? Can you try to do `console.log($(boxitem))` and see what it shows in the console? — Nikola Ivanov Nikolov, Nov 24 '12 at 20:21
Sure. In the page I have:
In the console I get: [
, context: #document, selector: "#instabox0"] Uncaught TypeError: Object [object Object] has no method 'backstretch' — albrivero, Nov 24 '12 at 20:37

score 0 · Answer 1 · answered Mar 05 '13 at 15:10

What I would do is build an array of image URLs inside the Ajax loop that you can use outside where .backstretch() is working when called.

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

How to use backstretch plugin method inside a $.ajax function

1 Answers1