Ok, I've got the bit.ly link, but now the asynchronicity of jQuery is getting in the way.

Question

function dlLink(title, currentArray, currentIndex, currentOpts) 
    {
        var img = new Image();
        img.src = 'Gallery/Wallpapers/' + title;
        html = img.width + ' x ' + img.height + '<br />'
                + '<a class = "nav" href = "Gallery/Wallpapers/' + title + '" target = "_blank">Download</a><br />http://';

        // set up default options
        var defaults = {
            login:      '*************',
            apiKey:     '*******************************',
            longUrl:    'http%3A%2F%2Fschnell.dreamhosters.com%2Fwallpapers.php%3Fwp=' + title
        };

        // Build the URL to query
        var daurl = "http://api.bit.ly/v3/shorten?"
                    + "&login=" + defaults.login
                    + "&apiKey=" + defaults.apiKey
                    + "&longUrl=" + defaults.longUrl
                    + "&format=json&callback=?";

        // Utilize the bit.ly API
        $.getJSON(daurl, function(results)  {
            $('#fancybox-title').append(results.data["url"].substr(7));
        });

        if(img.complete)
            return html;
    }

Ok, the point of this function is that it's a callback to a Fancybox that puts HTML content into it's 'title' section. In this section I put the image's resolution, a download link and a bit.ly link for coming back to the image at this website - http://schnell.dreamhosters.com/wallpapers.php?page=12 Originally I was having XMLHTTPRequest problems with the bit.ly URL, but I seem to have resolved those.

The problem now, though, is that I need the variable 'html' to have all the html content that's going into the fancybox before the return statement comes up. While it may look like everything happens before the return statement, jQuery is doing the $.getJSON() function asynchronosly and so it's not garaunteed that 'html' will have stuff in it before dlLink ends. I need a way to make it so that the order of things happens as its shown in the code, so that the $.getJSON request and the subsequent callback function will always finish what they're doing before going onto the return statement.

Edit - I figured out what to do and the code above correctly does as I wanted. See my answer below.

Answer 1

Ok, so I finally solved this after realizing a few things.

1 - You're kinda supposed to do all the work you can with the JSON data while in the callback function of $.getJSON().

2 - The area I was trying to put the link in had the id 'fancybox-title', so I just went ahead and said $('#fancybox-title').append(stuff);

3 - Fancybox's title (when shown on the inside at least) will only size itself for lines of text that are already there by the time the function formatting the title has finished. Anything appended to it after won't be accounted for in size and so the title area will remain the same and you'll see lines of text creep up into the picture (found this out the hard way). To get around this I made sure to add a 3rd line of text to my 'html' variable - <br />http:// This made Fancybox size its title area for 3 lines of text. Then in the callback function I used substr to take the bit.ly link starting from after http:// and to the end.