simpleFilter.js

a jQuery plugin to fancify your images

Scroll down for more

What is it?

simpleFilter.js is an easy-to-use jQuery plugin with a library of photo filters for your website. Choose from eight filters and six modifiers to create subtle effects. See below for examples or go straight to the instructions.

Here are some examples of the effects you can achieve with simpleFilter.js

fade

Slight fade for a dreamy effect

vintage

Cool tones and high contrast

greyscale

No colour, medium contrast

luxen + lightleak

Bright and energetic

subtle

Light and airy

olive

Deeper contrast, warm tones

beach

Cool tones and low blacks

oldtimey + shadow

Moody and lovely

Other options

lightleak01

lightleak02

vignette shadow

lightleak03

How to use it

Start by downloading the simpleFilter.js file and link it in your HTML document. Make sure you have the jQuery CDN linked as well!

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

If you'd only like to target some of your images, add classes to the images you'd like to target. Please note that images can only be targeted locally. Perhaps like this:

<img src="myimage.jpg" class="filter1">

Target your image with jQuery and add your chosen filter and/or lightleak/shadow option to your document ready selection. Because the plugin needs time to edit your images, you need to start on window load. It should look like the example below. Alternatively, if you don't want to wait for a window load, look into using images loaded. See below for a full list of image options.

$(window).load(function(){
$('img.filter1').simpleFilter({
	filter : 'fade',
	lightleak : 'lightleak01',
	shadow : 'drama'
	});
});

Ta-da! Your images should be fresh and fancy now. Colours manipulate differently on different images, so play around with different options to find a filter that suits the images best. Shadows and light leaks should be used sparingly.

Note: if you are testing this from your computer, this won't work. You will need to run testing on a local server :)

Full list of image options

Filters

Light Leaks

Shadows