Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources

36 Awesome jQuery Image Enhancing Plugin Tutorials and Resources

Posted on 02. Dec, 2009 by bmackler in Resources

Over the past few years, JavaScript frameworks including jQuery, Dojo, Mootools and Protools have become very popular with designers and developers who want to create dynamic effects without using cumbersome programming languages or 3d party animation programs.  These effects, including smooth transitions, animation, blending and user initiated movement are relatively easy to use even with little javascript programming experience.

Take a look at 36 awesome jQuery image plugin tutorials and resources.  Find out how jQuery can enhance how you display images on the web, including pop up windows, image galleries and special effects.

Tutorials

Facebox

Facebook-style lightbox

jQuery ThickBox

Webpage user interface dialog widget written in JavaScript.  Inline popup window

GalleryView

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Sprite Animation

Create quick sprite animation by applying an image and sprite options.

jQuery Corner

With this plugin you can create various kinds of corners(rounded and others).

Fading Header

A simple example using jQuery and CSS that shows you how to create the fading header technique

Rotate Image

jQuery plugin intended to rotate images made in pure Javascript + HTML5 canvas element.

jQuery Cycle

It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.

jQuery Tutorial – JQuery Cycle

crop, labelOver and pluck

Crop-Gives your visitors the power to crop any image on the fly using JavaScript only.

jQ SlickWrap

If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS’s float, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image.  This fixes that.

jQuery Tutorial - jQ SlickWrap

prettyPhoto

prettyPhoto might look like jQuery Lightbox clone but it supports videos, flash, YouTube videos, iFrames besides images.

CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™

Resizable Image Grid

Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa.

Image Rotator with Captions

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.

Sliding Boxes and Captions

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

InnerFade with JQuery

It’s designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Zoomimage

Stylish way to present your images in a nice popup with a drop shadow and border.

JQZoom

jQzoom is a great and a really easy to use script to magnify what you want.

SuperSized

A fullscreen photo gallery. It resizes images to fill browser while maintaining image dimension ratio. No extra whitespace, no scrollbars – the entire browser window is always filled.

Beautiful jQuery Slider

Beautiful jQuery sliders tutorial with image description and name.

Featured Content Glider

Showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow.

Easy Slider

Easy Slider  enables images or any content to slide horizontally or vertically on click.  Configurable with css alone.  Link to plugin file, set the content up and style it with css.

Polariod Photo Viewer

CSS3 is combined with jQuery. The result is polaroids that you can drag around on the page

Space Gallery

Click on the image will make it fade away and the next image will move forward.

Image S3Slider

Smooth Image Slider

Resources

More jQuery information can be found here

jQuery Cheat Sheets – It provides to aspects of cheat sheets. These are: those made for iPod and other mobile devices; and those with the A4 cheat sheet.
How to Build jQuery Plugins – One can try any of the following tutorials: A Plugin Development Pattern; Developing a jQuery Plugin; and Building your First jQuery Plugin.
jQueryForDesigners website which also provides useful tutorials in answer to request of readers.
The jSkinny on jQuery – It is a tutorial that covers jQuery javascript library.
15 Days Of jQuery-Fantastic tutorials and example code that takes you from zero to hero in no time flat.
Text box hints- You will see a lot of web sites with search boxes have text already populated inside of the field and when you select the input text box it disappears and reappears when it’s not selected. This tutorial will show you how can add a small amount of jQuery to add this feature to any of your web sites.
How to Get Anything You Want – This is an introductory tutorial on traversal methods and jQuery selectors and their use in DOM navigation
Cody Lindley- Who created the ThickBox and jTip plugins. - Featured Tutorials on Cody Lindley
It’s all about CSS – As the title suggests, this tutorial is all about CSS selectors. Once you learn from this tutorial, you can now easily query the DOM.
jQuery Crash Course – This tutorial is designed for web designers with advanced knowledge of codes.

Tags: jquery, Resources, tutorials, web development