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

jQuery(document).ready(function ($) {
    var URL = "http://api.instagram.com/oembed?url=http://instagram.com/p/xcNT9yk3BH";
    $.ajax({
        url: URL,
        dataType: "jsonp", // this is important
        cache: false,
        success: function (response) {
            var html = '<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 + '<br />Title : ' + response.title + '</p></div>';
            $("#container").html(html);
        },
        error: function () {
            $("#container").html("<p>There was an error in the ajax call</p>");
        }
    });
}); // ready