Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Brad Dougherty September 16, 2011
executable file 84 lines (66 sloc) 2.44 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vimeo Simple API Gallery Example</title>

<style>
#thumbs { overflow: auto; height: 298px; width: 300px; border: 1px solid #E7E7DE; padding: 0; float: left; }
#thumbs ul { list-style-type: none; margin: 0 10px 0; padding: 0 0 10px 0; }
#thumbs ul li { height: 75px; }

.thumb { border: 0; float: left; width: 100px; height: 75px; background: url(http://a.vimeocdn.com/thumbnails/defaults/default.75x100.jpg); margin-right: 10px; }

#embed { background-color: #E7E7DE; height: 280px; width: 504px; float: left; padding: 10px; }

#portrait { float: left; margin-right: 5px; max-width: 100px; }
#stats { clear: both; margin-bottom: 20px; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

var apiEndpoint = 'http://vimeo.com/api/v2/';
var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
var oEmbedCallback = 'switchVideo';
var videosCallback = 'setupGallery';
var vimeoUsername = 'brad';

// Get the user's videos
$(document).ready(function() {
$.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);
});

function getVideo(url) {
$.getScript(oEmbedEndpoint + '?url=' + url + '&width=504&height=280&callback=' + oEmbedCallback);
}

function setupGallery(videos) {

// Set the user's thumbnail and the page title
$('#stats').prepend('<img id="portrait" src="' + videos[0].user_portrait_medium + '" />');
$('#stats h2').text(videos[0].user_name + "'s Videos");

// Load the first video
getVideo(videos[0].url);

// Add the videos to the gallery
for (var i = 0; i < videos.length; i++) {
var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
html += '<p>' + videos[i].title + '</p></a></li>';
$('#thumbs ul').append(html);
}

// Switch to the video when a thumbnail is clicked
$('#thumbs a').click(function(event) {
event.preventDefault();
getVideo(this.href);
return false;
});

}

function switchVideo(video) {
$('#embed').html(unescape(video.html));
}

</script>
</head>
<body>

<h1>Vimeo Simple API Gallery Example</h1>
<div id="stats">
<h2></h2>
<div style="clear: both;"></div>
</div>
<div id="wrapper">
<div id="embed"></div>
<div id="thumbs">
<ul></ul>
</div>
</div>

</body>
</html>
Something went wrong with that request. Please try again.