Best jQuery Image Effects Plugins & Tutorials with Demo

    jQuery Image ‘Wrap’ Captions

    jQuery Image 'Wrap' Captions

    Simply place some text in the title attribute and give the image class=”captionme” and you will get lovely “wrap-around” captions which compliment your inline images. Simply play around with the css and caption background image to customise as you wish. Those with javascript turned off simply see the image as normal, sans-caption.

    Php & jQuery image upload and crop

    Php & jQuery image upload and crop

    We needed a PHP and jQuery image upload and crop tool and came up with the following.

    Before you start, ensure you have the following:

    • PHP 4 or Higher (It has been tested on Version 5)
    • Safe mode must be off! – A number of users have reported issues when safe mode is on.
    • PHP GD Library
    • jQuery ver 1.2.3 or Higher
    • Image Area Select plugin by Michal Wojciechowski

    Make your images interactive, Tag Your Images with jQuery

    Make your images interactive, Tag Your Images with jQuery

    Tagyourimages is a plugin for jQuery that lets you to make interactive your images.Now you can insert text and links on your images!.Through the tagTool you can tag your images in the simplest way possible.

    ThumbFx : Responsive jQuery Thumbnail Effects

    ThumbFx : Responsive jQuery Thumbnail Effects

    Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops

    Features:

    • CREATE – Slideshows, lightboxes, overlays, tooltips, tabs, galleries, showcase and many many more..
    • SIMPLICITY – No complicated HTML structure. Use it wherever you want, however you want. Works out of the box. No need to add confusing JavaScript tags, just add the files to your pages and you can control every settings from the HTML tag.
    • RESPONSIVE – All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.
    • CROSS -BROWSER SUPPORT – Works great with all modern browsers like Firefox, Chrome, Safari, Opera and Internet Explorer 8 and above.

    imJQMosaic : jQuery plugin creates Mosaic pattern using an image

    imJQMosaic : jQuery plugin creates mosaic pattern using an image

    imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image.

    This is a pure JavaScript based jQuery plugin. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don’t work on mobile phones not supporting Flash content.

    This plugin is based on the technique of CSS sprites and also uses some of the new features introduced in CSS3. The plugin requires latest browsers that support HTML5 and CSS3. In absence of adequate browser, the plugin gracefully degrades and still works! Ideal behavior of this plugin can be viewed in Safari 4 or Firefox 3.5. But it works with Chrome and IE 8 also.

    Catepilla : Image gallery get all wiggly with jQuery

    Catepilla : Image gallery get all wiggly with jQuery

    Make that image gallery get all wiggly with this jQuery plugin.

    scale9grid : jQuery Plugin for Scaling Background Images Using a Grid

    scale9grid : jQuery Plugin for Scaling Background Images Using a Grid

    This plugin adds support for scaling background images using a 9-grid. Developers can specify a grid for selected elements which causes the background-image to be scaled selectively, depending on what part of the grid the background lies. Parts of the background which lie in the corners of the grid will not be scaled and parts in the sides of the grid will only be scaled in one direction.

    Features:

    • No more slicing up images into multiple files
    • No more tedious styling and structural markup for the same effect
    • Achieve rounded corners
    • Achieve drop shadows
    • Complex fluid backgrounds

    Pixastic: JavaScript Image Processing Library

    Pixastic: JavaScript Image Processing Library

    Pixastic is an image processing library written in JavaScript. It uses the HTML5 Canvas element to apply effects such as blur, hue/saturation adjustment, emboss, invert, flip, etc.Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.

    CamanJS : Image Manipulation in Javascript with example

    CamanJS : Image Manipulation in Javascript with example

    CamanJS is manipulating images using the HTML5 canvas and Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

    CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

    Adipoli : Attractive jQuery Image Hover effect plugin

    Adipoli : Attractive jQuery Image Hover effect plugin

    Adipoli is a jQuery plugin that beautifies and simplifies creating and consuming such stylish hover effects.

    With a simple function, we can choose the “start effect (normal, transparent or overlay)” and the images will become less catch until they are hovered.

    There are 20+ built-in and attractive transition effects that will display the images “as is” when users hover them.

    Also, multiple configuration options exists for further customizing the transitions.