jQuery plugin for image special effects

For the badges program, I needed to find a way of graying out badges already awarded to this particular user. As an aside, I am looking up whether a badge has been awarded using the Google Apps Script award manager. Ideally, the question should be “is this badge in your Mozilla Backpack”, but for now I’ll stick with the award manager (it’s possible badge was awarded but not accepted into the backpack).

Page Content hide
1 pixastic.js
2 Share with your network

pixastic.js

I came across pixastic which allows you to apply special effects to images. There are a few different ways to use it, but Im using its jquery plugin. You need to include a couple of base files, plus one for each effect you intend to use. I only plan to use desaturate to gray out images.
<script src="https://storage.googleapis.com/toasty/cdn/js/pixastic.core.js" type="text/javascript"></script>
<script src="https://storage.googleapis.com/toasty/cdn/js/pixastic.jquery.js" type="text/javascript"></script>
<script src="https://storage.googleapis.com/toasty/cdn/js/actions/desaturate.js" type="text/javascript"></script>
Graying out the images couldn’t be easier – just pass over the image element to a function like this
  function grayImage (imgElem) {
  imgElem.pixastic("desaturate");
  }
When grayed, the images look like this
And that’s all there is. Check out pixastic for other effects.
For help and more information join our forum, follow the blog or follow me on Twitter .