Best jQuery Image Effects Plugins & Tutorials with Demo

    jQuery Image Crop

    August 19, 2013 | Image Effects, Plugins, Premium
    jQuery Image Crop

    A cropper for when you need images to be a specific size. It works using a predetermined aspect ratio. The UI differs from other croppers, here you may drag the image into position and even resize it.

    Features:

    • Works in all the major browsers, including IE8+ and mobile.
    • Minimal code. Doesn’t require jQuery UI.
    • The UI differs drastically from traditional image croppers.
    • Idiot-proof. I’ve added precautions to insure the computer illiterate don’t break it. For example, if the image proporations do not scale to the predetermined aspect ratio, then the image will automatically zoom in until it does scale.
    • Aspect ratio is easily changable through CSS. You haven’t got to touch any JavaScript.
    • Crop coordinates are sent to a .php file, where the image is cropped using imagemagick.
    • Custom styles. The code is barebones, it’s very easy to style.
    Read More Demo

    Echo.js : Simple JavaScript Image lazy loading

    August 13, 2013 | Core Java Script, Image Effects
    Echo.js : Simple JavaScript Image lazy loading

    Echo.js, simple JavaScript image lazy loading via HTML5 data-* attributes, superfast and standalone (jQuery free).Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute. This is also an asynchronous process which also benefits us.

    Read More Demo

    Narsis Cover : jQuery CSS3 Image Hover Animation Effect

    August 12, 2013 | CSS2 / CSS3.0, Image Effects, Plugins, Premium
    Narsis Cover : jQuery CSS3 Image Hover Animation Effect

    Narsis cover is highly customizable CSS3 animation effects for image hover.These Animations is carefully designed with attention to the details. Your visitors will love theme.

    Features:

    • 50 Animation Effect
    • 13 Color Schemes
    • We use FontAwesome for icons so you can use more than 360 icons for your menu.
    • All HTML5, CSS3 and JavaScript codes are fully validated and cleaned.
    • Cross-browser compatible, IE7 included.
    • Fully Customizable
    Read More Demo

    Watermark.js : jQuery Watermark Image plugin

    August 6, 2013 | Image Effects, Plugins
    Watermark.js : jQuery Watermark Image plugin

    Watermark.js is a js library for creating watermarks on images written by Patrick Wied. Images with a classname of your choice (default “watermark”) will get processed and then apply your watermark. Your watermark doesn’t have to be a .PNG or .GIF with transparency, watermark.js creates transparency even if you defined a .JPG as your watermark picture.

    The purpose of watermark.js is to protect images, served from your website from copying without a mark. It’s not a real image protection, because if you get the document at the initial state you’ll be able to read the srces but a normal user wont get it 😉 watermark.js is not limited to “image-protection” only, but you could also place a little identifier or a picture of you in your images.

    Read More Demo

    Show Icon on Mouse over Thumbnail Image using jQuery & CSS

    August 1, 2013 | CSS2 / CSS3.0, Image Effects
    Show Icon on Mouse over Thumbnail Image using jQuery & CSS

    Here I am going to tell how to show a icon on mouse over thumbnail image using simple jQuery & CSS.Now a days most websites are using this trick. In this tutorial You are going to show a link icon on mouse over anchored thumbnail, showing play icon on mouse over video thumbnail & showing Zoom icon on gallery thumbnails.

    Read More Demo

    BloxHover : jQuery Image Hover Effects

    July 22, 2013 | Image Effects, Plugins, Premium
    BloxHover : jQuery Image Hover Effects

    BloxHover is a simple jQuery plugin that animates overlay on images in 10 different effects. You can put any HTML content in the overlay. It’s structure is simple and it’s very flexible. The minified version of the plugin is 10kb. There are two types of effects – ones that ‘show’ the overlay with content on hover and the ones which ‘reveal’ the image, by fading out the overlay on hover.

    Read More Demo

    Slimmage : Sane & Simple Responsive Images

    July 10, 2013 | Core Java Script, CSS2 / CSS3.0, Image Effects
    Slimmage : Sane & Simple Responsive Images

    Your wait for a sane, easily managed path to responsive images has now ended.With Slimmage, CSS controls which image size is downloaded, not HTML

    Features:

    • Media queries, breakpoints, nested percentages, & max-width work as expected.
    • Works on > 99% of browsers. 3KB minified vanilla js, 1.5KB compressed.
    • Cookie-free; works on first page load. Works with CDNs.
    • Fully accessible; degrades gracefully without javascript
    • Massive bandwidth reduction. No duplicate requests. Can auto-enable WebP and adjust compression based on pixel density
    • Works with any RIAPI-compliant backend. ImageResizer is preferred.
    Read More Demo

    jQuery Unveil : A very lightweight plugin to lazy load images

    May 27, 2013 | Image Effects, Plugins
    jQuery Unveil : A very lightweight plugin to lazy load images

    A very lightweight jQuery plugin to lazy load images.This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. That’s what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k<.

    Read More Demo

    HeapShot : jQuery Stack Image gallery plugin

    May 25, 2013 | Gallery, Image Effects, Plugins
    HeapShot : jQuery Stack Image gallery plugin

    jQuery HeapShot plugin is an image gallery plugin with a stack effect.

    Read More Demo

    Double Viewer jQuery Plugin

    May 22, 2013 | Image Effects, Plugins, Premium
    Double Viewer jQuery Plugin

    Double Viewer jQuery Plugin is an easy-driven and comfy app which allow you to compare two different images in one slider. Double Viewer jQuery Plugin works in all of main browsers and mobile devices. Using Double Viewer jQuery Plugin you will be able to set any colors for cursor and line and to change the size of cursor and line. Also this Double Viewer has several types of mouse controlling. I hope this Double Viewer jQuery Plugin will be useful for you and your site.

    Read More Demo