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.
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 Email
|
|||
4 comments :
good
,.
Thank you so much it was very good .
Hello its fantastic . I have a question can we passing parameter as with and height to this java script on page?
Note: Only a member of this blog may post a comment.