Skip to content

Instantly share code, notes, and snippets.

@bluewhalelabs

bluewhalelabs/index.html

Created August 31, 2012 00:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bluewhalelabs/3546565 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bluewhalelabs/3546565 to your computer and use it in GitHub Desktop.
Download ZIP
TinyMeme Simple HTML
Raw
index.html
<html>
<head>
<title>TinyMeme: Lenovo</title>
<script id="traysTemplate" type="text/x-jquery-tmpl">
{{#data}}
<option value="{{id}}" data-name="{{name}}">{{name}}</option>
{{/data}}
</script>
<script id="trayTemplate" type="text/x-jquery-tmpl">
{{#data}}
<img src="{{url}}/100x100" height="100" width="100" data-id="{{id}}" data-url="{{url}}" alt=""/>
{{/data}}
</script>
<script id="galleryTemplate" type="text/x-jquery-tmpl">
{{#data}}
<a data-id="{{id}}" id="{{id}}" href="{{url}}"><img src="{{url}}/100x100" /></a>
{{/data}}
</script>
<link rel="stylesheet" href="http://chutedemos.heroku.com/leverage/main.css" type="text/css" />
<link rel="stylesheet" href="http://chutedemos.heroku.com/leverage/reveal.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://tinymeme.com/app/js/tinymeme.min.js?generator_id=4fd112c03c8e629a610006c1"></script>
<script src="http://chutedemos.heroku.com/leverage/jquery.reveal.js"></script>
<script>
$(function(){
memeCanvas = new TinyMemeCanvas('meme-canvas', {
fontSize : 30,
topText : $('#top_text').val().toUpperCase(),
bottomText : $('#bottom_text').val().toUpperCase()
});
myMeme = TinyMeme.init('', {
onTraysLoaded : function(){
$('.trays').addClass('loading');
myMeme.trays.render('#trays', '#traysTemplate', function(){
myMeme.trays.tray(myMeme.trays.data.data[0]['id']);
});
},
onTrayLoaded : function(tray){
$('.trays').removeClass('loading');
tray.render('#tray', '#trayTemplate');
$('#tray img:first').click();
},
onGalleryLoaded : function(gallery){
gallery.render('#submissions', '#galleryTemplate');
var _shortcut = document.location.hash;
if(_shortcut.length > 1){
$(_shortcut).click();
}
}
});
$('#tray img').live('click', function(event){
event.preventDefault();
$('.canvas').addClass('loading');
memeCanvas.setBackground($(this).attr('data-url') + '/380x256', function(){
// background loaded
$('.canvas').removeClass('loading');
});
});
$('#trays').change(function(event){
myMeme.trays.tray($(this).val());
});
var loadMemePopup = function(data){
$('#memeModal .meme-share-facebook').attr('href', data.facebook_share_url);
$('#memeModal .meme-share-twitter').attr('href', data.twitter_share_url);
$('#memeModal .meme-share-tumblr').attr('href', data.tumblr_share_url);
$('#memeModal .meme-share-pinterest').attr('href', data.pinterest_share_url);
$('#memeModal .meme-image-container').html('<img src="'+ data.image + '/w/520' +'">');
$('#memeModal .meme-share input').val(data.share_url); $('#memeModal').reveal();
}
$('#submissions a').live('click', function(event){
event.preventDefault();
memeCanvas.getData($(this).attr('data-id'), function(data){ loadMemePopup(data); });
});
$('#top_text, #bottom_text').bind('textchange', function (event, previousText) {
memeCanvas.updateTopText($('#top_text').val().toUpperCase());
memeCanvas.updateBottomText($('#bottom_text').val().toUpperCase());
});
$('#memeSave').click(function(event){
event.preventDefault();
var me = $(this);
me.addClass('submitting').attr('disabled', 'disabled');
// submit
memeCanvas.save(function(data){
me.removeClass('submitting').removeAttr('disabled');
loadMemePopup(data);
});
});
});
</script>
<style>
body {
background: url(http://subtlepatterns.com/patterns/cartographer.png);
font-family: Helvetica, Arial;
}
h1 {
font-size: 20px;
color: #fff;
}
h2 {
font-size: 16px;
color: #fff;
}
#trays {
display: none;
}
#tray {
float: left;
width: 600px;
text-align: center;
background: rgba(0,0,0,0.7);
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6) inset;
margin-right: 20px;
}
#tray img {
background: url();
width: 100px;
height: 100px;
border: 2px solid #fff;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
margin: 0 5px 5px 0;
}
.stage {
background: rgba(0,0,0,0.7);
overflow: hidden;
padding: 20px 0;
margin-bottom: 30px;
}
.preview {
float: left;
margin-right: 20px;
}
.fields {
float: left;
}
.fields input {
border: 0px;
display: block;
font-size: 14px;
margin-bottom: 5px;
}
#submissions {
clear: both;
background: rgba(0,0,0,0.7);
border-radius: 0px;
}
.powered {
color: #999;
font-size: 12px;
}
.powered a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #999;
}
</style>
</head>
<body>
<h1>TinyMeme // Lenovo</h1>
<select id='trays'></select>
<div class="stage">
<div id='tray'>
</div>
<div class="preview canvas">
<canvas id="meme-canvas" width="380" height="256"></canvas>
</div>
<div class="fields">
<input id="top_text" name="top_text" type="text" placeholder="top text" />
<input id="bottom_text" name="bottom_text" type="text" placeholder="bottom text" />
<button id='memeSave'>Save</button>
</div>
</div>
<h2>Recent Submissions</h2>
<div id='submissions'>
</div>
<p class="powered">powered by <a href="http://getchute.com" target="_blank">chute</a>. want to make your own? <a href="mailto:hello@getchute.com">say hello</a>.</p>
<div id="memeModal" class="reveal-modal">
<div class='meme-inner'>
<div class='meme-image-container'>
<img src=''>
</div>
<div class='meme-share'>
<input type='text'>
<a href='#' class='meme-share-facebook' target='_blank'>Facebook</a>
<a href='#' class='meme-share-twitter' target='_blank'>Twitter</a>
<a href='#' class='meme-share-tumblr' target='_blank'>Tumblr</a>
<a href='#' class="meme-share-pinterest" target='_blank'>Pinterest</a>
</div>
</div>
<a class="close-reveal-modal">&#215;</a>
</div>
<script type="text/javascript">
var _sf_async_config={uid:2471,domain:"slidechute.com"};
(function(){
function loadChartbeat() {
window._sf_endpt=(new Date()).getTime();
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src',
(("https:" == document.location.protocol) ? "https://a248.e.akamai.net/chartbeat.download.akamai.com/102508/" : "http://static.chartbeat.com/") +
"js/chartbeat.js");
document.body.appendChild(e);
}
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ?
loadChartbeat : function() { oldonload(); loadChartbeat(); };
})();
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21116897-4']);
_gaq.push(['_setDomainName', '.slidechute.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment