Best jQuery Image Effects Plugins & Tutorials with Demo

    Fakecrop : jQuery plugin to resize and crop bigger images

    Fakecrop : jQuery plugin to resize and crop bigger images

    jQuery-Fakecrop Plugin takes a collection of images and automatically scale them to fit a custom-defined bounding box. This creates a “fake” cropping effect on those images; which produces convincing thumbnails.

    canvasResize : jQuery Client side Image resizing plugin

    canvasResize : jQuery Client side Image resizing plugin

    canvasResize is a plugin for client side image resizing.It’s compatible with iOS6 and Android 2.3+ It can work both with jQuery and Zepto.

    I fixed iOS6 Safari’s image file rendering issue for large size image (over mega-pixel) using few functions from ios-imagefile-megapixel and fixed orientation issue by using exif-js.You can change image size and quality with plugin options easily.

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

    Features:

    • Ready to Responsive and Adaptive
    • Simple to use
    • Cross Browsers
    • Allow multiple connections
    • Auto Size(on/off)
    • Inhirit Padding(on/off)
    • Supports thirty animation effects from jQuery Easing
    • Overlay Style: classic,rolling(top,bottom,right,left),double(vertical,horizontal),four

    Slickhover.js : jQuery Slick and Smooth hover effect plugin

    Slickhover.js : jQuery Slick and Smooth hover effect plugin

    Slickhover.js is a lightweight useful jQuery plugin that produces a slick and smooth hover effect that fades out images and shows a custom icon when a user hovers over an image. All you have to do is call it on an image selector.

    jquery fitpic.js : Stretch images perfect

    jquery fitpic.js : Stretch images perfect

    Stretch images perfectly for fullscreen with jQuery fitpic js plugin.

    jQuery Alpha Image Plugin

    jQuery Alpha Image Plugin

    This plugin can change selected colours to transparent and give result as image or imagedata. This plugin works IE9+, Chrome, Firefox, Safari.

    Usage :

    • include the latest version jquery in your page
    • include the latest version this plugin
    • use .alphaimage() to iframe that you want to fix
    • also you can install this plugin using Jam.js or Bower (plugin name : Jquery-Alpha-Image)

    jQuery Stripes : Plugin that creates stripes on an Img element

    jQuery Stripes : Plugin that creates stripes on an img element

    jQuery stripes is a jQuery plugin that creates stripes on an img element.

    threesixty : jQuery plugin for creating draggable 360s Image sequences

    threesixty : jQuery plugin for creating draggable 360s Image sequences

    A jQuery plugin for generating a draggable 360 preview from an image sequence.

    imageloader.js : jQuery plugin for preloading images

    imageloader.js : jQuery plugin for preloading images

    A jquery plugin for preloading images.

    imgCentering.js : Centering Images with jQuery

    imgCentering.js : Centering Images with jQuery

    imgCentering.js is a lightweight jQuery plugin (about 1kB with minified) that help to center and resize images/pictures based on its original ratio within a fix dimension container.imgCentering.js will NOT crop your images, but it will centering them inside a fix dimension container while hide those oversize part of images using CSS overflow properties. Also, it manages to resize your images according to its container while maintain its original ratio.