Best jQuery Image Effects Plugins & Tutorials with Demo

    filtrr : Javascript image filters library

    filtrr : Javascript image filters library

    Filtrr2 is a JavaScript image manipulation library. Think of it as Instagram filters on the browser. It uses the <canvas> element to paint filtered pictures in the place of normal pictures on your website.Filtrr has a many image effect like Brighten, Saturate, Gamma, Adjust, Expose, Curves, Sharpen, Blur, Fill, Subtract, Sepia, Contrast, Posterize, Invert,  Alpha.

    Blending modes

    1. Multiply
    2. Screen
    3. Overlay
    4. Soft Light
    5. Addition
    6. Exclusion
    7. Difference

    Swish jQuery Zoom Hover Effect Plugin

    Swish jQuery Zoom Hover Effect Plugin

    Todays freebie is a swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s.With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). You can also adjust all the settings it comes with (refer to usage in the index.html header).

    PanoJS3 : JavaScript widget for Panning and Zooming a Panoramic image

    PanoJS3 : JavaScript widget for Panning and Zooming a Panoramic image

    PanoJS3 – An interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much larger than the available space in the browser viewport. Examples include panoramas, maps or high resolution document scans.

    Filter Slider : jQuery Image Manipulation

    Filter Slider : jQuery Image Manipulation

    The main goal of FilterSlider is to manipulate images and HTML content using canvas, jQuery library and Javascript.It uses advanced techniques to produce some of the popular effects like grayscale, sepia and saturation along with 13 other useful effects.These effects work on all major browsers that support the ‘canvas’ element.

    features:

    • Responsive layout
    • 16 filter effects for images and html content
    • Full width support
    • Powerfull API : init, destroy, next item, previous item, jump to item, stop auto, resume auto, action on each slide
    • Adjustable speed, transition, easing and effects for each caption or slide
    • Multiple sliders on the same page
    • Support for inline content
    • Animated blocks
    • Easily customizable via CSS file
    • Loading screen
    • Set start slide index
    • Can be easily loaded using ajax
    • Smart scale mode for images
    • 7 transition effects
    • Autoplay and stop parameters
    • Show/hide arrows and navigation
    • Randomize slides
    • Constant support and upgrades
    • Mouse wheel support

    SuperBGImage : jQuery Scaled fullscreen wallpapers and stuff

    SuperBGImage : jQuery Scaled fullscreen wallpapers and stuff

    Inspired by the website GOTOCHINA and jQuery Supersized by Sam Dunn, I have a jQuery plugin SuperBGImage created. For a recent project I had to adjust the Supersized plugin and integrate it into a REDAXO page. Since there was not much left of the original code, and some problems have occurred (performance), I decided right here own jQuery plugin to tinker.

    Features:

    • automatically scaled images on the browser size while respecting the original aspect ratio
    • Slideshow possible
    • different transition effects
    • Preload the images
    • different resolutions are supported (portrait / landscape, etc.)
    • Representation can also be inline in a DIV container
    • Callbacks onShow, onHide, onClick, OnMouseEnter, OnMouseMove and OnMouseLeave
    • Random, random effect

    PaintbrushJS : Browser-based Image processing JavaScript library

    PaintbrushJS : Browser-based Image processing JavaScript library

    PaintbrushJS is a lightweight, browser-based image processing library
    that can apply various visual filters to images within a web page.

    You use it by applying a class to an element on the page and setting
    a few parameters with some extra HTML attributes. If the element is
    an img or it has a background-image set in your CSS, PaintbrushJS
    will create a temporary canvas element and manipulate the image
    there, before finally saving it back out to the original element.

    jQuery 3D Parallax Text And Image Effect

    jQuery 3D Parallax Text And Image Effect

    hey hi today i wanna show you Layers 3D is a powerful jQuery plugin which you can use for creating ‘Parallax’ or ‘Out of the Image’ effects on your site. With ‘fullsize’ mode you can create even a whole parallax effect website!

    You can create layers (we recommend to use PNG images) and position them (by adding left and top properties) inside their container element. After that if you use Layers 3D plugin on the container element the layers will be moving if you scroll on your page (or – optional – if you move your mouse cursor over the element).

    Pretty Hover Effects with CSS and jQuery

    Pretty Hover Effects with CSS and jQuery

    This article will show you how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only. This can come useful especially if you already have hundreds of images that you want to apply this effect on.

    lenticular.js : jQuery tilt-controlled Images

    lenticular.js : jQuery tilt-controlled Images

    Remember those cards from the bottom of the Cracker Jack box – the ones that changed images as they were tilted? Well, lenticular.js brings that interaction to the iPhone. It can be used for fancy-pants product views or just to slather some whimsy onto a boring.jpg. Check out the demo on your iPhone.

    BlackAndWhite : Html5 Black and White image jQuery Plugin

    BlackAndWhite : Html5 Black and White image jQuery Plugin

    This plug-in can easily convert any colored image (in an html page) into a B&W greyscale image.