Best jQuery Image Effects Plugins & Tutorials with Demo

    jQuery toCanvas : Add effects to Images & Videos

    jQuery toCanvas : Add effects to Images & Videos

    This jQuery plugin allow you to add effects to images and html5 videotags easily. It supports different types of processed effects and overlay

    simpleFilter.js : jQuery plugin to Fancify your Images

    simpleFilter.js : jQuery plugin to Fancify your Images

    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.

    Prism Effect Slider with HTML5 Canvas & JavaScript

    Prism Effect Slider with HTML5 Canvas & JavaScript

    Today we’d like to show you how to build a simple slider with an interesting “prism” effect. The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order to create the illusion of a prism. We’ll be using the HTML5 canvas element and plain JavaScript.

    Imgx : jQuery extension for Serving High-Resolution Images

    Imgx : jQuery extension for Serving High-Resolution Images

    Lightweight jQuery extension for serving high-resolution images on desktop and mobile devices. Compatible with @2x, @3x, and @4x image varients, using Apple’s recommended naming convention for high-resolution graphics.

    ImageEditor : jQuery Image Editing Plugin

    ImageEditor : jQuery Image Editing Plugin

    A simple plugin for jquery utilizing camanjs to do image editing and filter applying.

    Pixie : JavaScript Image Editor

    Pixie : JavaScript Image Editor

    Pixie is a online javascript image editor script that can easily crop, rotate, resize, zoom and round your images corners right from your browser and then save it to your computer.

    • Easily crop, rotate, resize, zoom
    • Free Drawing Mode
    • Add Text to Images
    • Apply Multiple Image Filters
    • Draw and Add Various Shapes
    • Choose from 100s of Stickers
    • Layers and History Management
    • HTML5, No Flash Required

    Glfx.js : JavaScript Image effects library using WebGL

    Glfx.js : JavaScript Image effects library using WebGL

    Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone.This library provides realtime image effects using WebGL. There are three parts to glfx.js:

    • texture: a raw source of image data (created from an <img> tag)
    • filter: an image effect (represents one or more WebGL shaders)
    • canvas: an image buffer that stores the results (a WebGL <canvas> tag)

    Parallax Hero Image with CSS3 3D Transforms

    Parallax Hero Image with CSS3 3D Transforms

    A full-width figure element, with floating images distributed in a 3D space.

    What you can achieve through CSS 3D Transforms is limitless. With power comes responsibility, though. There will be cases when you’ll take full advantage of CSS 3D capabilities. In most projects, though, you can just spice things up a little.

    ClassyPicozu : jQuery Image Editing Plugin

    ClassyPicozu : jQuery Image Editing Plugin

    ClassyPicozu is a jQuery plugin that allows you to use Picozu’s advanced image editing functions on images from your own website. Basically you get an awesome online image editor your visitors can use to play with.

    Dense.js : jQuery plugin for serving Retina-ready Images

    Dense.js : jQuery plugin for serving Retina-ready Images

    Dense is a jQuery plugin for serving retina-ready, high pixel ratio images with ease. Small, ease-to-adapt, yet very customizable and works cross-browser. With Dense, your content images get support for data-ratiox attributes and Apple’s retina image naming convention.