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
site is looking for colorup.minjs?ver=1
I don't know javascript and am trying to use this on my site. I'm not getting it to work and see that the site is looking for colorup.min.js?ver=1. Why is that and what do I do to correct this?

Thank you,
Keith
- by Keith on 10/18/2013
site is looking for colorup.minjs?ver=1
I don't know javascript and am trying to use this on my site. I'm not getting it to work and see that the site is looking for colorup.min.js?ver=1. Why is that and what do I do to correct this?

Thank you,
Keith
- by Keith on 10/18/2013
broken on firefox n ie
if you scale the image, say 50%, the animation is broken on IE and Firefox. Safari, Chrome and Opera does well though. Thanks
- by boes on 6/15/2014
javascript error
Hello,

I get this error
Erreur : TypeError: $.fn is undefined
Fichier Source : .............../colorup_min.js
Ligne : 12

Any idea?

thanks in advance!
- by Paul on 8/5/2014
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
 
» Latest
» Random/Popular
© Codicode | Content and source © 2013