Learning jQuery

jQuery NailThumb is jQuery plugin allows to create thumbnail from any image with full control using jQuery. You can create thumbnails easily from high-resolution images, without any distortion, with one line of jQuery code. You can even decide thumbnail dimensions directly from CSS. Integrates prefectly with any media gallery, even more usefull in dynamic web application when you can face any shape or size.

If you want to add avatars to your application it's easier to use this plugin to let them fit any size you need then to develop a functionality that help your user to upload avatars of the right size/sizes.

This plugin provides various methods to create thumbnails. Whatever method you choose and whatever proportions limit you fix NailThumb will always create a thumbnail without any distortion and will keep your image as big as possible.

A very basic use of this plugin is,

//Code Starts
<div class="nailthumb-container">
   <img src="path/to/image.png" />
</div>

$(document).ready(function() {
    $('.nailthumb-container').nailthumb({width:100,height:100});
});
//Code Ends

You can also define the thumbnail size using a CSS and the advantage is so whenever you'll want to restyle you won't have to touch your javascript to let the thumbnails fit.

//Code Starts
<style type="text/css" media="screen">
 .square-thumb 
 {
    width: 150px;
    height: 150px;
 }
</style>

<div class="nailthumb-container square-thumb">
   <img src="path/to/image.png" />
</div>

$(document).ready(function() {
    $('.nailthumb-container').nailthumb();
});
//Code Ends

This will create thumbnail of 150 x 150. This plugin provides many options to create thumbnails like Crop to Fit, with Animation, Show image title with thumbnail and many more...

Feel free to contact me for any help related to jQuery, I will gladly help you.