A jQuery plugin which turn all your images to duotone.
JavaScript CoffeeScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
.jshintrc
LICENSE
README.md
bower.json
gulpfile.js
jquery-duotone.jquery.json
jquery.duotone.js
jquery.duotone.min.js
package.json

README.md

jquery-duotone

A jQuery plugin which turn all your images to duotone.

Installation

Install using Bower

bower install jquery-duotone

or download as zip or fork on GitHub.

Include the following resources on your page before initializing:

<script src="jquery.duotone.js"></script>

Exemples

Pass your gradient map as an option of the plugin:

<script>
  // To attach Duotone to an image element
  $("img").duotone({
    gradientMap: "#0000FF, white"
  });
</script>

Or use the data-gradient-map attribute:

<img src="your-image.jpg" data-gradient-map="lightslategrey, mistyrose">
<script>
  // To attach Duotone to an image element
  $("img").duotone();
</script>

Options

Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set the gradient map option for a specific instance by attaching a data-gradient-map attribute containing a properly formatted CSS linear gradients.

Name Description Type Default
gradientMap Same format as CSS linear gradients without the initial angle, sides or corners. Instead you provide simply a list of comma-separated color-stops. string 'black, white'

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Sets default plugin options

$("img").duotone("defaults", opts);
Name Description Type Default
opts Options object object {}

reset

Resets instance back to original image

$("img").duotone("reset");

process

Process the image to a duotone

$("img").duotone("process");

TODO

  • Support srcset attribute
  • Support picture element (source)
  • Write exemples