Aspdotnet-Suresh

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

Generate/Create Thumbnails From Images in JQuery using Asp.net

Sep 16, 2012
Introduction:

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

Description:

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

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="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Generate Thumbnail Images using JQuery in asp.net</title>
<link href="jquery/jquery.nailthumb.1.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="jquery/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.nailthumb-container').nailthumb({width:100,height:100});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><b>Original Image</b></td>
<td><b>Thumbnail Image</b></td>
</tr>
<tr>
<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>
</td>
</tr>
</table>
</form>
</body>
</html>
Demo

Download sample code attached

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

Get the latest Asp.net, C#.net, 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

4 comments :

vijaya said...

good

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 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.