jQuery plugin to get the latest public images from your Ember account

ember-badge.js

(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)

example.html

<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>