JQuery Nailthumb High resolution thumbnail display plugin

JQuery Nailthumb allows you to easily create lossless thumbnails of high-resolution images, with just one line of code to fix. You can use CSS to set the size of the thumbnail, jQuery nailthumb not really cut the picture, just the appropriate zoom to the picture, positioning to a different location, so if the picture is large, or using the background programming language to cut the picture to create thumbnails.

Characteristics

Easy to use, one line of code can be done
Use CSS to control the size and location of thumbnails completely
Because you just scaled the picture, you can keep the high resolution of the picture.
You can customize the zoom ratio of the picture, trim the picture to a different location
Applicable to

Basically any media gallery

But if you want to use the avatar in your Web application: This plugin can avoid creating a avatar function that allows your users to load the correct height and width, you can still nicely place your layout in need of size/size. Most importantly, when you want to not need your users to upload a new one, or even manage different sizes/ratios of the avatar to choose different layouts, all of them without faults can be changed.

does not apply to

This plugin will not help you to provide very large high-definition images easier. If you have a very large image and want to have a lower size thumbnail, you will still have a batch adjusted hand. There is no way to do the client through JavaScript.

However this plugin, you have to adjust to a higher bandwidth-friendly dimension, you don't need the crop/adjust to any particular aspect ratio, the most important thing is that you can change it as long as you want, and then through the CSS shape.

How to use

Basically every thumbnail you need is a container and a way to set your thumbnail width and height. The best way to do this is through CSS (see this example), so when you want to change the JavaScript you do not need to touch you to make the thumbnail fit.

Import jquery class library, plug-in JS and CSS, as follows:

<link rel= "stylesheet" href= "Css/jquery.nailthumb.1.0.min.css" >
<script src= "H/jquery/1.7.1/jquery.min.js" ></script>
<script src= "Js/jquery.nailthumb.1.0.min.js" ></script>

Write some pictures and div tags

<div class= "Nailthumb-container square-thumb" >

</div>
<div class= "Nailthumb-container square-thumb" >

</div>
<div class= "Nailthumb-container square-thumb" >

</div>

Write a CSS to display thumbnails

. square-thumb {
width:150px;
height:150px;
}

Invoke the plug-in method as follows:

JQuery (document). Ready (function () {
JQuery ('. Nailthumb-container '). Nailthumb ();
});

You can use the container elements of a picture to generate thumbnails.

Optional parameters

All options can be specified directly in the plug-in call or through metadata. If you need to change any of the default options, you don't have to use the specified $.fn.nailthumb.defaults for each call Nailthumb