Aside: Skitch is Mac-only, but I’ve heard good things about Jing if you’re on Windows. I don’t know of an equivalent solution on Linux, unfortunately.

Skitch does a lot of things well, but one bit of polish which always pops out at new users is the “Click to Clipboard” functionality. Skitch provides lots of ways for you to share your images, and when you click in the appropriate field, the site copies all the data to your computer’s clipboard, and presents a nice confirmation that you’re ready to paste that elsewhere:

I decided to create a workalike function in jQuery, my favorite javascript library. I got a rudimentary version up and running a while back, building on the approach Jeff Larson wrote up, over at http://www.jeffothy.com/weblog/clipboard-copy/.

Today, I was able to get my workalike polished up and turned into my first jQuery plugin – it’s available at http://github.com/chrispatterson/jquery-clipboard/tree/master. There are still some pieces of polish I’m planning to add, but I’m pretty happy with it so far.

Using the plugin

Note: this assumes that you’ve downloaded jQuery (http://docs.jquery.com/Downloading_jQuery), the jQuery Flash plugin (http://jquery.lukelutman.com/plugins/flash/), and the jQuery Clipboard plugin (http://github.com/chrispatterson/jquery-clipboard/tree/master). All examples can be used at the bottom of the page (immediately before the </body> tag), or set to fire with $(document).ready

To add “click to clipboard” behavior to the element with an id of share-link:

$('#share-link').clickToClipboard();

To add “click to clipboard” behavior to all elements with a class of shareable:

$('.shareable').clickToClipboard();

clickToClipboard allows you to customize how long it takes for the notice to fade out, as well as the message used (for cases where you don’t want to use an image).

To have a slower fade effect, starting 1.5 seconds after the target element loses focus:

$('#share-link').clickToClipboard( {fadeoutLength: 900, fadeoutTimer: 1500}););

To customize the notice text:

$('#share-link').clickToClipboard( {clipboardText: "You're ready to paste!"}););

The look and feel of the notice is totally customizable through CSS. I’ve included a demo in the github repository, which shows how it might look with a background image. This is my first jQuery plugin, so I’m definitely open to feedback on ways to structure things better, or enhancement requests on how it be more flexible about supporting stuff folks need.