jQuery Behance

A simple plugin to display Behance projects on your web site.

Requirements

• jQuery 1.9.x
• Behance application registration for your web site.
• Colorbox jQuery lightbox plugin for slideshows (included).

Installation

1. Register the web site you'll use the plugin with Behance.

Application Name: Behance jQuery plugin Website: http://yoursite.com Redirect URI (for OAuth): http://www.yoursite.com/path Description: Display my Behance projects on my web site.

2. Add an empty HTML element to contain your portfolio.

<div id="#be-grid"></div>

3. Add jQuery and Colorbox. Use an existing colorbox theme or create your own.

<link rel="stylesheet" href="../lib/colorbox/example3/colorbox.css">
<link rel="stylesheet" href="jquery.behance.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="../lib/jquery-1.9.1.min.js"><\/script>');
}
</script>
<script src="../lib/colorbox/colorbox/jquery.colorbox-min.js"></script>

4. Add the plugin to your page, enter your Behance API key and user ID. Change colorbox settings to suit your taste.

<script src="../jquery.behance.js"></script>
<script>
  $(document).ready(function() {

    $('#be-grid').behance({
      apiKey: 'R@ND0M5TRINGFROM8EHANC3',
      user: 'username',
      sort: 'featured_date',
      gridID: '#be-grid',
      cssItem: 'be-item group',
      cssTitle: 'green',
      cssMore: 'button',
      colorbox:  {
        slideshow: false,
        transition: 'elastic'
      }
    });
  });
</script>

To Do List

• Switch from Colorbox to Magnific Popup.
• Display project text in slideshows.
• Restore endless page feature (load more).
• Show loading indicator for paged project display.
• Investigate caching options.
• Handle/display errors.
• Display Works in Progress.
• Document all plugin options (sort, css options, etc.).

Credits

• Behance API team.
• John Ressig and the jQuery team.
• Jack Moore, creator of colorbox.

License

Copyright (c) 2013 Chad Kieffer. Licensed under the MIT license.