Skip to content

Instantly share code, notes, and snippets.

@jollytoad
Created May 18, 2011 23:31
Show Gist options
  • Save jollytoad/979831 to your computer and use it in GitHub Desktop.
Save jollytoad/979831 to your computer and use it in GitHub Desktop.
Picasa photo frame
<!DOCTYPE html>
<html>
<head>
<title>Photos</title>
<style>
html, body { padding: 0; margin: 0; background-color: black; color: white; width: 100%; height: 100%; }
#photo { background-repeat: no-repeat; background-position: center; background-size: auto 100%; width: 100%; height: 100%; }
#msg { position: fixed; bottom: 0; right: 0; text-align: right; color: white; font-size: 10px }
</style>
</head>
<body>
<div id="photo"/>
<div id="msg"/>
<script type="text/javascript">
var users = ['sparkleysprout', 'jollytoad'],
photos = [],
img = document.getElementById("photo"),
msg = document.getElementById("msg"),
head = document.getElementsByTagName("head")[0];
function jsonp(url, delay) {
window.setTimeout(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
head.appendChild(script);
}, delay);
}
function getAlbums(user) {
msg.innerText = "Loading " + user;
jsonp("http://picasaweb.google.com/data/feed/api/user/"+user+"?v=2&fields=title,entry(title,link[@rel='http://schemas.google.com/g/2005%23feed'](@href))&alt=json-in-script&callback=gotAlbums", 0);
}
function gotAlbums(data) {
msg.innerText = "Loaded " + data.feed.title.$t;
data.feed.entry.forEach(getPhotos);
}
function getPhotos(album) {
msg.innerText = "Loading " + album.title.$t;
album.link.forEach(function(link, i) {
jsonp(link.href+"&fields=title,entry(content(@src))&callback=gotPhotos", i*10);
});
}
function gotPhotos(data) {
msg.innerText = "Loaded " + data.feed.title.$t;
data.feed.entry.forEach(function(entry) {
photos.push(entry.content.src);
});
}
function showRandomPhoto() {
var i = Math.floor(Math.random()*photos.length),
url = photos[i];
if (url) {
msg.innerText = url.replace(/^.*\//, "")
img.style.backgroundImage = 'url(' + url + ')';
}
window.setTimeout(showRandomPhoto, 5000);
}
msg.innerText = "Loading...";
users.forEach(getAlbums);
showRandomPhoto();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment