<html>
<title>rule-of-thirds.js bookmarklet</title>
<head>
<style type="text/css">
.button-wrapper {
margin: 2em 0;
}
.inline-button,
.button {
/* base64 encoder: http://www.greywyvern.com/code/php/binary2base64 */
/* Source image: http://tiny.cc/public/images/default-favicon.ico */
background-image: url(data:image/vnd.microsoft.icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAA+/v8APn3+QCeTWQAcmh+APj5+gBVKksA9/X3APb29gD08vMA9/j5APT09gD7/PwA8/HyAPPz9QD6+/sA9fP1AGcwWQDy8vQAOB07APn6+gD49vcA2eryAPX19gCckqgA8/HzAPb19gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMTExMTExMTExMTExMAAAAGDQ0NDQ0NDQ0NDQ0GAAAAERkZGRkZGRkZGRkZEQAAAAMJCQkJCQkJCQkJCQMAAAADEg4SDhISEg4ODg4DAAAAAxAQEBAQEBAQEBAQAwAAAAMaGhoaGhoLFxcXGgMAAAADBwcHBwcHBwcHBwcDAAAAAxUVFRUVFRUVFRUVAwAAAAMCAgICAgICAgICAgMAAAAECgUKBQoKCgUWFhYEAAAABAUUBRQFBQUYGBgYBAAAAAQUDxQPFBQUGAgIFhgAAAAEDwEPAQ8PDxgIFhgAAAAABAEMAQwBAQEYFhgAAAAAABgYGBgYGBgYGBgAAAAAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACABwAAgA8AAIAfAAA=);
background-repeat: no-repeat;
background-color: #65a9d7;
background-position: 10px center;
padding: 10px 20px 10px 32px;
border-radius: 8px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.inline-button {
display: inline;
background-color: transparent;
padding-right: 3px;
padding-left: 28px;
font-size: 1em;
background-size: 13px 13px;
}
.inline-button a {
text-decoration: none;
color: #65a9d7;
}
body {
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
font-size: .9em;
color: #444;
}
p {
line-height: 1.5em;
margin: .5em 0 1em 0;
}
ul {
line-height: 2em;
list-style-type: none;
padding-left: 1em;
}
</style>
</head>
<body>
<section data-markdown>
To install the bookmarklet, [drag it to your bookmark toolbar](http://dl-web.dropbox.com/u/29440342/screenshots/HEILHU-2013.1.2-18.52.png), after which you can run it on any webpage with interesting images.
<div class="button-wrapper"><a class="button" href="javascript:(function(){var s = document.createElement('script');s.src = 'https://gist.github.com/raw/4331769/cdffe1f17ccda7eeadd1a732753ce067aba4147f/rule-of-thirds.bookmarklet.js';document.body.appendChild(s);})();">RuleOfThirds</a></div>
The above is the January 2, 2012 release of rule-of-thirds.bookmarklet.js. For
development purposes, I've also created the following variants of the
bookmarklet. Since the dated release is more stable and secure, only use these
if you know what you're doing.
* <div class="inline-button"><a href="javascript:(function(){var s = document.createElement('script');s.src='https://gist.github.com/raw/4331769/rule-of-thirds.bookmarklet.js';document.body.appendChild(s);})();">RuleOfThirds-HEAD</a></div>
https://gist.github.com/raw/4331769/rule-of-thirds.bookmarklet.js
* <div class="inline-button"><a href="javascript:(function(){var s = document.createElement('script');s.src='http://localhost:9090/rule-of-thirds.bookmarklet.js?time'+(new Date().getTime());document.body.appendChild(s);})();">RuleOfThirds-localhost</a></div>
http://localhost:9090/rule-of-thirds.bookmarklet.js?time=12345678
Feel free to try out the bookmarklet with some famous photographs:
<a data-pin-do="embedBoard" href="http://pinterest.com/dergachev/beyond-rule-of-thirds-lecture/"></a>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script>
// adapted from http://blog.harakys.com/blog/2012/02/21/embed-markdown-into-your-html/
// see also https://gist.github.com/1343518
[].forEach.call( document.querySelectorAll('[data-markdown]'), function fn(elem){
var html = (new Showdown.converter()).makeHtml(elem.innerHTML);
elem.innerHTML = html;
});
</script>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js" ></script>
</body>
</html>