Skip to content

Instantly share code, notes, and snippets.

@aron
Created March 21, 2010 13:26
Show Gist options
  • Save aron/339299 to your computer and use it in GitHub Desktop.
Save aron/339299 to your computer and use it in GitHub Desktop.
jQuery plugin to get the latest public images from your Ember account
(function ($) {
$.emberBadge = function (selector, username, options) {
var $badge = $(selector);
options = $.extend(options || {}, $.emberBadge.defaults);
// Source: http://javascript.crockford.com/remedial.html
function renderTemplate(values) {
return options.template.replace(/{([^{}]*)}/g, function (a, b) {
var r = values[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
});
}
function formatImageSize(src) {
return src.replace(/m.(?:png|jpe?g)$/, options.size + '.src');
}
$.getJSON(options.url.replace('{username}', username), function (data) {
var images = data.response.images,
rendered_strings = [];
$.each(images, function (i) {
if (i < options.total) {
rendered_strings.push(renderTemplate({
href: this.permalink,
title: this.name,
src: formatImageSize(this.file.src),
alt: this.name
}));
}
});
$badge.html(rendered_strings.join(''));
});
};
$.emberBadge.defaults = {
size: 'sq',
total: 6,
template: '<li><a href="{href}" title="{title}"><img src="{src}" alt="{alt}" /></a></li>',
url: 'http://api.emberapp.com/users/view/{username}/images/index.json?callback=?'
};
})(jQuery)
<h1>Ember Badges</h1>
<ul id="ember-badge">
<li class="empty">No Ember Images</li>
</ul>
<!-- Include jquery.js and ember-badge.js -->
<script type="text/javascript">
// To run simply pass in the id of the badge element
// and the username to load. An optional object can
// be passed in to set the number of images as well
// as the thumbnail size (sq, t, s, m & l).
$.emberBadge('#ember-badge', 'ac94', {
size: 't', // The size of the thumbnail to load.
total: 8 // Number of images to load.
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment