Best jQuery Image Effects Plugins & Tutorials with Demo

Make a Web App with Instagram-like Filters in jQuery & CamanJS

Make a Web App with Instagram-like Filters in jQuery & CamanJS

In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins:

  • Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
  • Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
  • jQuery Mousewheel – I am using this plugin to scroll the filter container;
  • In addition, we are using the latest version jQuery at the time of writing.

retina.js : JavaScript Serve high-resolution Images to Retina devices

retina.js : JavaScript Serve high-resolution Images to Retina devices

retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Hotspotter : Hotspot Maker jQuery Plugin

Hotspotter : Hotspot Maker jQuery Plugin

Easily create amazing hotspots on your images with just point & click!

Features:

  • Different Types of Spots & Tooltips
  • UNIQUE & Amazing Aiming Effect!
  • Tip & Bubble tooltips
  • Change tooltip direction “top, bottom, right, left”
  • Different tooltip animations
  • Change tooltip position relative to spot
  • Activate it on hover , click or make it always active
  • Change spot border radius
  • Make your spot point to a URL
  • Add text or HTML content to tooltips
  • Unobtrusive spots
  • Create spots with your own images!
  • Share your spots “have a direct link to it , when navigating to this link the browser window will scroll down to where the image is located & trigger spot”
  • Fully Responsive

elevateZoom : jQuery Image Zoom Plugin

elevateZoom : jQuery Image Zoom Plugin

elevateZoom is a highly-customizable jQuery plugin for creating image-zoom interfaces with ease.It can work with a single high-quality image or two images (a thumb and a high-quality version).

The zoom window can be placed on any part of the page (or image) and there is also an option for inline-zooming which saves space.

Features:

  • Fully Customisable
  • Coloured Tints
  • Fancybox Gallery Support
  • External Controls
  • Window Zoom, Lens Zoom and Inner Zoom
  • Free to use under MIT and GPL Licenses

SwinxyZoom : jQuery Takes the ImageZoom paradigm to the highest level

SwinxyZoom : jQuery Takes the ImageZoom paradigm to the highest level

SwinxyZoom takes the ImageZoom paradigm to the highest level, not content with a single level zoom and jerky movements we’ve packaged together everything you need for a myriad of effects whilst taking care performance and compatibility to ensure a consistent look and feel.

Designed to work across a large range of designs, screens (mobile, tablets, laptops) and devices from the latest UltraBooks to memory constrained mobile devices SwinxyZoom you can be sure the largest number of people will be able to see your imagery the way it was intended.

Vague.js : jQuery Blur any kind of Html Element

Vague.js : jQuery Blur any kind of Html Element

Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters. This script is crossbrowser and it was tested on:

  • Firefox 10 +
  • Chrome 18 +
  • Safari 6.0 +
  • IE 7 +

jQuery.BlackAndWhite : Convert Colored image into B&W Greyscale Image

jQuery.BlackAndWhite : Convert Colored image into B&W Greyscale Image

This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image.It uses the the HTML5 canvas tag and a fallback for the old browsers

jQuery Image Color Up Plugin

jQuery Image Color Up Plugin

With Color-Up jQuery plugin easily add beautiful hover effects to your images, add transitions from (and to) a monochrome, sepia, negative, darkened or lightened version of the image.

Etalage : jQuery Image Zooming plugin

Etalage : jQuery Image Zooming plugin

A ready to use jQuery image zooming plugin to present your images in the highest detail without leaving the page.Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose.

Features:

  • Customizable by CSS and plugin options
  • Precise positioning of all elements based on your image dimensions and CSS
  • The small thumbnails are automatically generated, sized and positioned
  • Low resolution preview (enlarged thumbnail) while downloading the zoomed image (except in IE)
  • Optional easing of the zoomed image movements
  • Optional autoplay
  • Optional descriptions/captions
  • Unlimited number of images
  • Align Etalage left/right, with the zoom area on the opposite side
  • Small thumbnails can be positioned below or on the left/right (vertically)
  • Multiple instances per page possible
  • Right-to-left language support
  • Optional external controls for previous/next/specific image
  • Advanced: customizable callback functions
  • Works in all common browsers (and IE6 )
  • Includes an “absolute basic” and 6 more example files to get you started

jQuery UI FlipBook

jQuery UI FlipBook

FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.

Features:

  • set the animation speed
  • change animation direction
  • exclude specific images
  • single step through the images
  • resizes to fit the images