VanillaGram is an easy-to-use Vanilla JS plugin, based on the original simpleFilter.js, created by Vivien Ilett, 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.
Slight fade for a dreamy effect
Cool tones and high contrast
No colour, medium contrast
Bright and energetic
Light and airy
Deeper contrast, warm tones
Cool tones and low blacks
Moody and lovely
Start by downloading the vanillagram.js file and link it in your HTML document.
<script src="path/to/vanillagram.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="path/to/image.jpg" class="filter1">
Target your image and add your chosen filter and/or lightleak/shadow option. The plugin detects if the image was fully loaded and only then apply the filters.
VanillaGram('.filter1', {
filter: 'fade',
lightleak: 'lightleak1',
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 :)
Filters
Light Leaks
Shadows