A simple jQuery plugin to fancify your images
CSS JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.gitignore
README.md
jquery.simpleFilter.js

README.md

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!