Render html media items from JSON

by Alex Azuero

HTML

<div id="container"></div>

CSS

* {
    margin:0;
    padding: 0;
}
img {
    vertical-align: top;
    max-width: 100%;
}
.container {
    float: left;
    display: block;
    margin: 2px;
    max-width: 200px;
}

JavaScript

var shortcodes = ["xhiFXqhQe8", "xag9OfOHOT", "xkBygQK20u", "xcNT9yk3BH"];
jQuery(document).ready(function ($) {
    for (var i = 0; i < shortcodes.length; i++) {
        $.ajax({
            url: "http://api.instagram.com/oembed?url=http://instagram.com/p/" + shortcodes[i] + "",
            dataType: "jsonp", // this is important
            cache: false,
            success: function (response) {
                var item =
                    '<div class="container">' +
                    '<a href="' + response.thumbnail_url + '" >' +
                    '<img src="' + response.thumbnail_url + '" alt="thumbnail" /></a>' +
                    '<p>Author : ' + response.author_name + '<br />' +
                    'Author\'s ID: ' + response.author_id + '</p></div>';
                document.getElementById("container").innerHTML += item;
            },
            error: function () {
                $("#container").html("<p>There was an error in the ajax call</p>");
            }
        });
    }
}); // ready