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

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="http://xliberation.com/cdn/js/pixastic.core.js" type="text/javascript"></script>
<script src="http://xliberation.com/cdn/js/pixastic.jquery.js" type="text/javascript"></script>
<script src="http://xliberation.com/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. 

Badges iframe plugin

See How to set up your own badge environment if you want to award badges on your own site. Click on the badges on the right to see how it works.





For help and more information join our forum,follow the blog or follow me on twitter .




Comments