Skip to content

Instantly share code, notes, and snippets.

@randombrad
Created January 18, 2012 22:25
Show Gist options
  • Save randombrad/1636216 to your computer and use it in GitHub Desktop.
Save randombrad/1636216 to your computer and use it in GitHub Desktop.
Vimeo Simple API Alloy Js
<style>
ul { list-style-type: none; margin: 0; padding: 0; }
li { display: inline; padding: 0; margin: 10px 2px; }
img { border: 0; }
img#portrait { float: left; margin-right: 5px; }
#stats { clear: both; }
</style>
<h1>Vimeo Simple API Example</h1>
<div id="stats"></div>
<p id="bio"></div>
<div id="thumbs">Loading videos...</div>
<script type="text/javascript">
AUI().ready('jsonp', 'jsonp-url', function(A) {
var url = "http://vimeo.com/api/v2/worldimpact/videos.json";
// Change this to your username to load in your clips
var vimeoUserName = 'brad';
// Tell Vimeo what function to call
var userInfoCallback = 'userInfo';
var videosCallback = 'showThumbs';
// Set up the URLs
var userInfoUrl = 'http://vimeo.com/api/v2/' + vimeoUserName + '/info.json?callback=' + userInfoCallback;
var videosUrl = 'http://vimeo.com/api/v2/' + vimeoUserName + '/videos.json?callback=' + videosCallback;
video = new A.JSONPRequest(videosUrl, showThumbs);
function showThumbs(videos){
var thumbs = A.one('#thumbs');
thumbs.html('');
var ul = A.Node.create('<ul>');
ul.appendTo(thumbs);
for (var i = 0; i < videos.length; i++) {
var thumb = A.Node.create('<img>');
thumb.attr('src', videos[i].thumbnail_medium);
thumb.attr('alt', videos[i].title);
thumb.attr('title', videos[i].title);
var a = A.Node.create('<a>');
a.attr('href', videos[i].url);
thumb.appendTo(a);
var li = A.Node.create('<li>');
a.appendTo(li);
li.appendTo(ul);
}
}
video.send();
userinfo = new A.JSONPRequest(userInfoUrl, userInfo);
function userInfo(info){
var stats = A.one('#stats');
var portrait = info.portrait_small;
var img = A.Node.create('<img>');
img.attr('id', 'portrait');
img.attr('src', portrait);
img.attr('alt', info.display_name);
img.appendTo(stats);
var h2 = A.Node.create('<h2>');
A.Node.create(info.display_name + "'s Videos").appendTo(h2);
h2.appendTo(stats);
A.one('#bio').html(info.bio);
}
userinfo.send();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment