Pixastic – JavaScript for Processing Images

With Pixastic you can apply an effect on a image (like desaturate, blur, sharpen, sepia and others) without needing two photos and change them on hover, mouseenter.

In the following example I’ve used Pixastic to turn an image from grey scale to colored on mouse over.

Step 1 – download the plugin

First go to the download page of the plugin here and on ‘Build your own‘ choose ‘Pixastic core’ and ‘jQuery plugin’ for the components and for the ‘Actions’ check the ones you like to use (in my case ‘Desaturate’). You will download a file called ‘pixastic.custom.js’.

Step 2 – include the files

Include in the head of  your page the following files:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pixastic.custom.js"></script>

Step 3 – the markup

<div class="parent" data-image="photo1"><img src="/images/photo1.jpg" id="photo1" alt=""/></div>
<div class="parent" data-image="photo2"><img src="/images/photo2.jpg" id="photo2" alt=""/></div>

Here we have two colored images that we want to transform to grey scale (so when the page loads the images are first grey scale), and when we go with the mouse over them, to reverse to color.

Step 4 – initiate the plugin

You will need to include this code after the first 2 script files in the head of your page.

<script type="text/javascript">
$(document).ready(function(){
  $("div.parent").each(function(index, obj) {
    $("#" + $(obj).attr("data-image")).pixastic("desaturate");
  });

  $("div.parent").mouseenter(function(e) {
    var self = document.getElementById($(e.currentTarget).attr("data-image"));
    Pixastic.revert(self);
  });

  $("div.parent").mouseleave(function(e) {
    $("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
  });
});
</script>

*The second image is with mouse over

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s