Best jQuery Image Effects Plugins & Tutorials with Demo

jquery.fillwidth : Line up Images to the edge of their Container

jquery.fillwidth : Line up Images to the edge of their Container

A jQuery plugin that given a ul with images inside their lis will do some things to line them up so that everything fits inside their container nice and flush to the edges. Used throughout Art.sy to make rows of images fit inside a fluid container and still stay flush without cropping the images.

IMGr : jQuery Image Rounder

IMGr : jQuery Image Rounder

IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.

Features:

  • Unobtrusive, <img> element preserved
  • Configure border size, style, color and
    individual corner radius
  • Update corners dynamically
  • Uses CSS3 in supporting browsers
  • Uses VML in IE 6, 7, and 8

jQuery My Fade Over Image

jQuery My Fade Over Image

This plugin create a fading effect for image on mouse over. In addition, you can select a color tone filter for your images. The tone is set for the images, when they are not hovered. When it is hovered, the color tong filter will be removed, so that there is a clear distinction between this selected image and other non-selected images. You do not need to prepare multiple sets of images, also you can change the color tone using javascript.

Filter-me : jQuery plugin to filter images using canvas

Filter-me : jQuery plugin to filter images using canvas

jQuery filter.me is a jQuery dependant script that allows you to apply filters to images using Photoshop .acv Curves Adjustment files. jDataView is used to read the Photoshop file, from which we create a Monotonic Spline Curve representing its data. From this curve the new pixel RGB values can be calculated. These values are then applied using HTML5’s canvas element.

Literally any Photoshop curves file can be applied to multiple images with ease. This is a great alternative to using something like PHP’s imagemagick to try and replicate similar filtering. It can sometimes be a little slow, especially in mobile browsers, but I’m sure this will improve as canvas becomes more mainstream.

jQuery Image Scale Plugin

jQuery Image Scale Plugin

This jQuery plugin automatically scales images to fit or fill their parent container. The defined parent container of the image must have a defined height and width in CSS.

Hover-Zoom : Facebook style zoom on Image hover in jQuery

Hover-Zoom : Facebook style zoom on Image hover in jQuery

This Javascript plugin displays a your images in full size when the mouse hovers over them.Just include this plugin and all images in your webpage will have the Hover-Zoom effect!

jQuery Wheelzoom : A plugin to enlarge IMG elements on mousewheel/trackpad

jQuery Wheelzoom : A plugin to enlarge IMG elements on mousewheel/trackpad

A small plugin for zooming IMG elements with the mousewheel/trackpad. Wheelzoom works by scaling and positioning a background-image, after it sets the IMG element’s src to a transparent png. Wheelzoom doesn’t add any extra elements to the DOM, or change the positioning of the IMG element.

jQuery Photo Zoom Plugin

jQuery Photo Zoom Plugin

Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector, take a look this live demo.

Responsive Img : jQuery Responsive Image Plugin

Responsive Img : jQuery Responsive Image Plugin

This jQuery Plugin make your existing images responsive without creating new images.Responsive Img is a solution to all which combines a jQuery plugin with a PHP image pre-processor.The plugin enables the page to change the src attributes of the images in parallel to the container width and the PHP file auto-creates the new/resized images.

Images are only created when requested for the first time and this process won’t be repeated for future requests to perform better.

imgLiquid : jQuery Responsive Image Plugin

imgLiquid : jQuery Responsive Image Plugin

jQuery plugin to resize images to fit in a container.