aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Generate/Create Thumbnails From Images in JQuery using

Sep 16, 2012

In this article I will explain how to create or generate thumbnails from Images in JQuery using


In previous article I explained
Generate thumbnail from images in, Generate thumbnails from YouTube videos using JQuery and many articles relating to JQuery,, SQL Server etc. Now I will explain how to generate or create thumbnails from Images using JQuery in

To generate thumbnails using JQuery we have a plugin called NailThumb with this plugin we can generate the thumbnail without any distortion and with one line of JQuery code. If we use this NailThumb jQuery plugin we can set thumbnail dimensions as per for requirements and we have extra features like change the style of image tooltips

To use NailThumb JQuery plugin to generate thumbnails check below code

<html xmlns="">
<head runat="server">
<title>Generate Thumbnail Images using JQuery in</title>
<link href="jquery/jquery.nailthumb.1.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="">
<script src="jquery/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
<form id="form1" runat="server">
<td><b>Original Image</b></td>
<td><b>Thumbnail Image</b></td>
<td> <img src="Parrot.jpg" title ="parrot" height="350px" width="450px" /></td>
<td valign="top">   <div class="nailthumb-container"> <img src="Parrot.jpg" title="Beautiful Parrot" class="nailthumb-title"/>   </div>

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


vijaya said...


Anonymous said...


Anonymous said...

Thank you so much it was very good .

Anonymous said...

Hello its fantastic . I have a question can we passing parameter as with and height to this java script on page?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.