https://github.com/nxame/InvertImages
Invert White Images using SVG Filters.
https://github.com/nxame/InvertImages
css-filters ie10 invert-images javascript jquery modernizr svg
Last synced: about 2 months ago
JSON representation
Invert White Images using SVG Filters.
- Host: GitHub
- URL: https://github.com/nxame/InvertImages
- Owner: nxame
- License: mit
- Archived: true
- Created: 2013-11-28T12:48:21.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2024-07-18T01:25:46.000Z (over 1 year ago)
- Last Synced: 2025-04-08T22:01:34.372Z (9 months ago)
- Topics: css-filters, ie10, invert-images, javascript, jquery, modernizr, svg
- Language: HTML
- Homepage: https://absqueued.github.io/InvertImages/
- Size: 1.11 MB
- Stars: 6
- Watchers: 0
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
- [Working Demo](https://absqueued.github.io/InvertImages/)
- Blog post(coming soon!)
## Prerequisite
- [Modernizr](http://modernizr.com/download/#-inlinesvg-svg-shiv-cssclasses-prefixes-css_filters) 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).
```javascript
//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`.
## Changelog
- **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.