Category : Javascript | Author : Chtiwi Malek | First posted : 12/5/2012 | Updated : 4/10/2013
Tags : javascript, jquery, plugins, color, effects, transitions, plugin
jQuery Image Color-Up Plugin

jQuery Image Color-Up Plugin

With Color-Up jQuery plugin easily add beautiful hover effects to your images, add smooth transitions from (and to) a monochrome, sepia, negative, darkened or lightened version of the image.
It's easy to use this plugin, just add the class name "colorup" to any image in your site.
<img src="image.jpg" class="colorup" />

Parameters :

You can also add any of these attributes to the image to configure the plugin :

Effect :
    mono : Monochrome/Greyscaled image. (default value)
    sepia : Dark brown-gray colored image
    negative : Inverse image colors.
    light : Image Brighten/Light up effect
    dark : Image Darken/Low Light effect

Speed : Animation/Transition duration, in milliseconds. 1000ms is the default value.

Inverse : Which image to start with. If false the animation will start with the original image. false is the default value.

Example :

<img src="image.jpg" class="colorup" effect="sepia" inverse="true" speed="2000"/>
This plug-in relies on HTML's canvas element to generate effects on your pictures.

How it works?
Check out this jQuery Image Color Up Effect Tutorial.

I'd love to hear your thoughts and ideas, so feel free to comment. and if you like this plugin, please Share it.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Custom monotone coloring
Hey, awesome function and plugin.
I found myself in the situation in wich I had to convert a image to a monotone other than black and white. it wasn't hard tweaking your code to fit my needs but thought I'd share.
Simply go to the grayImage function's switch and add a new case, say custom:

case ("custom"):

                var mono = imgData.data[pos] * 0.34 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.16;
                   imgData.data[pos] = mono+(r*(1- (mono/255)));
                   imgData.data[pos + 1] = mono+(g*(1- (mono/255)));
                   imgData.data[pos + 2] = mono+(b*(1- (mono/255)));
               break;
 
now replace the r, g and b values for the ones with the target color, in my case it was #ff6666, so r = 255, g = 102, b = 102, and voila, you have a mono tone image in your custom color.
- by Other Oscar on 1/15/2013
Thanks, I was looking for this and found it here. I can edit my image in my blog now by the code without to use photoshop.
Visit me here
- by Khong Guan on 4/19/2020
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :