Create Thumbnail Images Easily with jQuery NailThumb

Written by Kevin Liew on 27 Apr 2012
23,262 Views • Javascript

Introduction

jQuery NailThumb is a client-side image thumbnail resizer. Based on my understanding, the image file size should be the same but this script able to create thumbnail easily from high-res images, without any distortion, with one line of code. The dimension can be decided in CSS and it integrated perfectly with any media gallery, even more useful in dynamic web application when you face any shape or size.

Features

  • Support crop, resize, position
  • Dsiplay image title with animation
  • Preload images
  • Integrated with jQuery Metadata Plugin that allows you to specify metadata directly in your markup and reuse them via javascript
  • Built in methods for customization

Screen shots

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Related Articles
11 Javascript Color Pickers Plugins
Create Thumbnail Images Easily with jQuery NailThumb
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Oshane 11 years ago
Imagine you have 50 high resolution image that is loaded on the site.. does this method reduced the fetching of those files
Reply
Kevin Admin 11 years ago
I don't think so. This isn't the real "resize" and "cropping". You would need server side script to do it. For example, timthumb: https://code.google.com/p/timthumb/
Reply