benbuckman/flickr-slideshow-code-generator.html

## flickr-slideshow-code-generator.html
<!doctype html>
<!--
Flickr slideshow code generator.
Created by Ben Buckman, August 2014. Open source under MIT license.
-->
<html>
  <head>
    <title>Flickr Slideshow Generator</title>

    <script>
    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="http://www.flickr.com/apps/slideshow/show.swf?v=124984"></param>' +
        '<param name="allowFullScreen" value="true"></param>' +
        '<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=124984" ' +
          '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">' +
        '</embed></object>';

      } catch(err) {
        console.error(err);
        alert("Error: " + err.message);
      }

      document.getElementById('generated').innerHTML = html;
      document.getElementById('show').innerHTML = html;
      document.getElementById('preview').style.display = 'block';
    }
    </script>

    <style>
    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; }
    </style>
  </head>

  <body>
    <h1>Flickr Slideshow Code Generator</h1>

    <div class="form">
      <label for="album_url">
        Album URL:<br/>
        <small>(e.g. https://www.flickr.com/photos/123456789@N12/sets/12345678901234567/)</small>
      </label>
      <div><input type="text" id="album_url"></div>
      <div><input type="submit" value="Generate" onclick="generate()" /></div>
    </div>

    <div id="preview">
      <h2>Code &amp; Preview</h2>

      <div class="wrapper">
        <textarea id="generated" disabled></textarea>
      </div>

      <div class="wrapper" id="show"></div>
    </div>

  </body>
</html>
	<!doctype html>
	<!--
	Flickr slideshow code generator.
	Created by Ben Buckman, August 2014. Open source under MIT license.
	-->
	<html>
	<head>
	<title>Flickr Slideshow Generator</title>

	<script>
	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="http://www.flickr.com/apps/slideshow/show.swf?v=124984"></param>' +
	'<param name="allowFullScreen" value="true"></param>' +
	'<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=124984" ' +
	'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">' +
	'</embed></object>';

	} catch(err) {
	console.error(err);
	alert("Error: " + err.message);
	}

	document.getElementById('generated').innerHTML = html;
	document.getElementById('show').innerHTML = html;
	document.getElementById('preview').style.display = 'block';
	}
	</script>

	<style>
	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; }
	</style>
	</head>

	<body>
	<h1>Flickr Slideshow Code Generator</h1>

	<div class="form">
	<label for="album_url">
	Album URL:<br/>
	<small>(e.g. https://www.flickr.com/photos/123456789@N12/sets/12345678901234567/)</small>
	</label>
	<div><input type="text" id="album_url"></div>
	<div><input type="submit" value="Generate" onclick="generate()" /></div>
	</div>

	<div id="preview">
	<h2>Code & Preview</h2>

	<div class="wrapper">
	<textarea id="generated" disabled></textarea>
	</div>

	<div class="wrapper" id="show"></div>
	</div>

	</body>
	</html>