jQuery Plugin To Change Colors Of Your Images colorMatrix js - Download jQuery Plugin To Change Colors Of Your Images - colorMatrix.js

Download jQuery Plugin To Change Colors Of Your Images – colorMatrix.js

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Change Colors Of Your Images – colorMatrix.js, hope it will help you in programming stack.

jQuery Plugin To Change Colors Of Your Images colorMatrix js - Download jQuery Plugin To Change Colors Of Your Images - colorMatrix.js
File Size: 77 KB
Views Total: 2838
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

colorMatrix.js is a cross-browser jQuery plugin that makes use of SVG feColorMatrix or CSS filters to change colors of your images on mouse hover.

How to use it:

1. Place the jQuery colorMatrix.js plugin’s stylesheet in the head section.

view source
1 <link href="path/to/jquery.colormatrix.css" rel="stylesheet">

3. Add the CSS class ‘grayscale’ or ‘sepia’ to your images.

view source
1 <img src="1.jpg" class="sepia">
2 <img src="2.jpg" class="grayscale">

4. You can also apply the colormatrices to your images via JavaScript.

view source
1 $("img").colorMatrix({
2   // OPTIONS
3 });

5. Configuration opitons.

view source
01 // grayscale or sepia
02 className: "sepia", // invert, sepia or greyscale
03 matrixType: "matrix",
04 ids: ["sepia", "normal"],
05 values: [
06   /* Sepia */
07   "0.393 0.769 0.189 0 0
08   0.349 0.686 0.168 0 0
09   0.272 0.534 0.131 0 0
10   0     0     0     1 0",
11   /* Normal color values */
12   "1     0     0     0 0
13   0     1     0     0 0
14   0     0     1     0 0
15   0     0     0     1 0"
16 ]

Change log:

2017-05-07

  • Unsafe attempt error fix

2015-05-07

  • Added inverted color support

This awesome jQuery plugin is developed by mzilverberg. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: