Skip to content

Instantly share code, notes, and snippets.

Created August 27, 2014 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benbuckman/7016d33df6a501a36222 to your computer and use it in GitHub Desktop.
Save benbuckman/7016d33df6a501a36222 to your computer and use it in GitHub Desktop.
Flickr slideshow code generator
<!doctype html>
Flickr slideshow code generator.
Created by Ben Buckman, August 2014. Open source under MIT license.
<title>Flickr Slideshow Generator</title>
function generate() {
try {
var html = '';
var albumUrl = document.getElementById('album_url').value;
console.log('albumUrl', albumUrl);
var albumPath = albumUrl.replace(/^https?:\/\/(www\.)?flickr\.com/, '')
if (!albumPath || !albumPath.length)
throw new Error("Can't parse album from this URL.");
if (!/^\/photos\/[0-9A-Z]+@[0-9A-Z]+\/sets\/[0-9A-Z]+\/$/i.test(albumPath))
throw new Error("Parsed album URL is not in expected format.");
console.log('albumPath', albumPath);
var encodedAlbumPath = encodeURIComponent(albumPath);
console.log('encodedAlbumPath', encodedAlbumPath);
var setId = albumUrl.match(/\/sets\/([0-9A-Z]+)\//i)[1];
if (!setId || !setId.length)
throw new Error("Can't parse set ID from URL.");
console.log('setId', setId);
html += '<object height="480" width="640">' +
'<param name="flashvars" value="offsite=true&lang=en-us&page_show_url=' +
encodedAlbumPath + 'show%2F&page_show_back_url=' + encodedAlbumPath +
'&set_id=' + setId + '&jump_to=">' +
'</param>' +
'<param name="movie" value=""></param>' +
'<param name="allowFullScreen" value="true"></param>' +
'<embed type="application/x-shockwave-flash" src="" ' +
'allowFullScreen="true" flashvars="offsite=true&lang=en-us' +
'&page_show_url=' + encodedAlbumPath + 'show%2F' +
'&page_show_back_url=' + encodedAlbumPath + '&set_id=' + setId +
'&jump_to=" width="640" height="480">' +
} catch(err) {
alert("Error: " + err.message);
document.getElementById('generated').innerHTML = html;
document.getElementById('show').innerHTML = html;
document.getElementById('preview').style.display = 'block';
body, * { font-family: helvetica, arial, sans-serif; }
.form input[type="text"] { width: 600px; font-size: 1em; }
.form input[type="submit"] { font-size: 1em; }
#preview { display: none; }
#preview, #show { margin-top: 2em; }
#generated { font-size: .8em; width: 600px; height: 200px; }
small { color: #aaa; }
<h1>Flickr Slideshow Code Generator</h1>
<div class="form">
<label for="album_url">
Album URL:<br/>
<div><input type="text" id="album_url"></div>
<div><input type="submit" value="Generate" onclick="generate()" /></div>
<div id="preview">
<h2>Code &amp; Preview</h2>
<div class="wrapper">
<textarea id="generated" disabled></textarea>
<div class="wrapper" id="show"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment