Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
129 lines (96 sloc) 3.81 KB
<html>
<head>
<title>Vimeo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* { margin:0px; padding:0px; }
#slides li { float:left; max-width: 200px; }
#slides li img { width: 100%; }
</style>
</head>
<body>
<ul id="slides">
</ul>
<script>
// Change this to your username to load in your clips
// var vimeoUserName = 'user945560';
var vimeoUserName = '940516';
// Tell Vimeo what function to call
var userInfoCallback = 'userInfo';
var videosCallback = 'showThumbs';
// Set up the URLs
var userInfoUrl = 'https://vimeo.com/api/v2/' + vimeoUserName + '/info.json?callback=' + userInfoCallback;
var videosUrl = 'https://vimeo.com/api/v2/channel/' + vimeoUserName + '/videos.json?callback=' + videosCallback;
// This function loads the data from Vimeo
function init() {
var head = document.getElementsByTagName('head').item(0);
// var userJs = document.createElement('script');
// userJs.setAttribute('type', 'text/javascript');
// userJs.setAttribute('src', userInfoUrl);
// head.appendChild(userJs);
var videosJs = document.createElement('script');
videosJs.setAttribute('type', 'text/javascript');
videosJs.setAttribute('src', videosUrl);
head.appendChild(videosJs);
}
// This function goes through the clips and puts them on the page
function showThumbs(videos) {
var thumbs = document.getElementById('slides');
thumbs.innerHTML = '';
var ul = document.createElement('ul');
thumbs.appendChild(ul);
//callback formato json
console.log(videos)
for (var i = 0; i < videos.length; i++) {
var thumb = document.createElement('img');
thumb.setAttribute('src', videos[i].thumbnail_large);
thumb.setAttribute('alt', videos[i].title);
thumb.setAttribute('title', videos[i].title);
var a = document.createElement('a');
var strong = document.createElement('strong');
strong.innerHTML = videos[i].title;
strong.setAttribute("class", "font-inv");
var video = videos[i].url.replace("vimeo.com/","player.vimeo.com/video/")
var att = document.createAttribute("data-href"); // Create a "class" attribute
att.value = video;
var att2 = document.createAttribute("data-description"); // Create a "class" attribute
att2.value = videos[i].description;
var att3 = document.createAttribute("data-user"); // Create a "class" attribute
att3.value = videos[i].user_name;
var att4 = document.createAttribute("data-title"); // Create a "class" attribute
att4.value = videos[i].title;
var featherlight = document.createAttribute("data-featherlight"); // Create a "class" attribute
featherlight.value = "iframe";
a.setAttributeNode(att);
a.setAttributeNode(att2);
a.setAttributeNode(att3);
a.setAttributeNode(att4);
a.setAttributeNode(featherlight);
//player.vimeo.com/video/
// var video = videos[i].url.replace("vimeo.com/","player.vimeo.com/video/")
a.setAttribute('href',video);
a.appendChild(thumb);
var li = document.createElement('li');
li.appendChild(a);
li.appendChild(strong);
thumbs.appendChild(li);
}
}
// This function adds user info to the page
function userInfo(info) {
var stats = document.getElementById('stats');
var img = document.createElement('img');
img.setAttribute('id', 'portrait');
img.setAttribute('src', info.portrait_small);
img.setAttribute('alt', info.display_name);
stats.appendChild(img);
var h2 = document.createElement('h2');
h2.appendChild(document.createTextNode(info.display_name + "'s Videos"));
stats.appendChild(h2);
document.getElementById('bio').innerHTML = info.bio;
}
// Call our init function when the page loads
init()
</script>
</body>
</html>