Get new jQuery plugins just once a week

×

Duotone

February 10, 2015

Duotone | jQuery plugin which turn all your images to duotone.

Duotone is a simple jQuery plugin that converts all your images or selected images to duotone.

Created by Fabrice Lejeune

Download

Duotone jQuery plugin

image

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

Duotone

Related posts:

Jcrop
Flickrush
Albumize
Duotone jQuery plugin

http://jquer.in/wp-content/uploads/2015/02/Duotone.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever