🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Image Effects Plugins

Documentation

#jQuery Plugin || simpleFilter.js

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.

View demo here:http://www.vivienilett.com/simplefilter

#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. 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]:https://github.com/desandro/imagesloaded. 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.

#Full list of image options

##Filters: fade, vintage, greyscale, luxen, subtle, olive, oldtimey

##Light Leaks: lightleak01, lightleak02, lightleak03

##Shadows: vignette, drama

#Enjoy!

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

Feel free to add to this plugin or suggest improvements as you see fit!


You May Also Like