Invert White Images using SVG Filters.
HTML JavaScript CSS
Latest commit d256fd3 Jun 12, 2015 @shekhardesigner Updated GITIGNORE
Permalink
Failed to load latest commit information.
dist Code optimizations, saved upto 2KB when minified Jun 10, 2015
images
.gitignore Updated GITIGNORE Jun 12, 2015
Gruntfile.js
InvertImages.css
LICENSE Moved dist files Jun 10, 2015
README.md Added more info in README Jun 12, 2015
bower.json
index.html Code optimizations, saved upto 2KB when minified Jun 10, 2015
jquery.invertImages.js
package.json

README.md

Invert Images

Version 1.0.4

Invert White Images to Black using SVG, targeted for IE10 as CSS3 Filters replacement.

Browser Support

  • Internet Explorer 10
  • Chrome/Firefox Supports CSS3 filter

Demo

Prerequisite

  • Modernizr with CSS Filters and Prefixed detection enabled.
  • jQuery 1.x

How-To

  1. Make sure Modernizr (with CSS Filters) and jQuery is added to your HTML file.
  2. Add jquery.invertImages.min.js to your HTML file.
  3. Call the invertImages() function inside DOM ready to the target image(s).
    //Initialize
    $(function () {
        $("img").invertImages();
    });

    //Destroy
    $(function () {
        $("img.toDestroy").invertImages('destroy');
    });

Other Options

Option Default Value Description
rootElm html Root element where you wish a flag/class to be added once plugin convert image using SVG
rootFlag inverted A class to be added on rootElm.

Change Log

  • Version 1.0.0 - First authored.
  • Version 1.0.2 - Updating with Bower/NPM updates, configured grunt.
  • Version 1.0.3 - Destroy option to be passed as string. Garbage cleared (_default was of no use - removed. Destroy actually removes the stored data()); Added more CSS in .invert-it class because now more browsers supports the CSS Filters.
  • Version 1.0.4 - Heavy optimization, local option object. No plugin invocation if CSS3 filter exists. Minified only 2KB now.