jQuery plugin to resize images to fit in a container.
Best jQuery Image Effects Plugins & Tutorials with Demo
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
- Multiply
- Screen
- Overlay
- Soft Light
- Addition
- Exclusion
- Difference
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 – 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
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
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 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
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
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
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.
