Create a beautiful thumbnail web app using the awesome jquery thumbnail build plugin nailthumb

• Online Demo 1
• Local Downloads

Everyone in the Web site development and Web applications often need to deal with pictures, because the user upload images are often different size, how to generate a uniform size of the thumbnail is often a headache, the general way is basically using the background program php,jsp and other processing after uploading the image, Cut thumbnails of the specified size for Web sites or application specific needs. The main problem is that you need to develop the corresponding background related programs, and once you specify the thumbnail size, later if you want to be able to modify at any time, often need to modify the background code, very troublesome! Today we will introduce an ultra-strong jquery thumbnail Generation plugin-nailthumb, use this plugin can help you in the foreground to generate no image distortion thumbnail, and support the foreground clipping, add picture description and animation functions, I believe you will love!

Key Features

• Auto-processing of graphics rate, no distorted picture generated
• Ability to add thumbnail effects
• Support cropping
• Easy to add picture description

How to use

Import jquery class library, plugin JS and CSS, as follows:

1. <link rel="stylesheet" href="Css/jquery.nailthumb.1.0.min.css">
2. <script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
3. <script src="Js/jquery.nailthumb.1.0.min.js"></script>

Call the plug-in method, as follows:

1. $('. Thumbwrapper '). Nailthumb({});

Use the container element of the picture to generate a thumbnail image.

Image thumbnail display app

Here we will develop an image thumbnail display application, the main code is as follows:

Html

2. <ul id="container">
4. <li data-tag = "Ducati" ><strong>hypermotard 796 Silver</strong> src=< Span class= "ATV" > "img/motor/model-page_2012_hypermotard_796_298.jpg" ><a href= "#" Class= "viewthumb" >view thumbnails< span class= "tag" ></A></LI>
6. <li data-tag = "Ducati" ><strong>hypermotard 796 Red</strong> src= "img/motor/hm-796_2001_r_[298x168].jpg" ><ahref= "#" class= "viewthumb" >view Thumbnails </A></LI>
8. <li data-tag="Ducati"><strong>hypermotard 1100 Evo Red</strong> src="Img/motor/2012-ducati-hypermotard-1100evo4-298.jpg"> <a href="#" class="Viewthumb">View Thumbnails</a> </li>
10. </ul>
14. <ul id="thumb">
16. <li class = "Thumbwrapper Bhoriz" > <a href= "#" > src= "img/ Motor.png " title=" 280x180 " /></A></LI>
18. <li class = "Thumbwrapper bsquare" > <a href= "#" > src= "img/ Motor.png " title=" 150x150 " /></A></LI>
20. <li class = "Thumbwrapper Vert" ><a href= "#" > Span class= "ATN" >src= "img/motor.png" = "100x130" /></a></li
22. <li class = "Thumbwrapper Square" ><a href= "#" > src= "img/motor.png" title< Span class= "pun" >= "100x100" /></a></li>
24. <li class="Thumbwrapper horiz"><a href="#"> src="Img/motor.png" title="100x70" /></a></li>
26. </ul>

Define two container elements, one containing a picture of the thumbnail to be generated, and another containing a different size thumbnail for the resulting image. Javascript

2. $(function() {
4. $('. Viewthumb '). Click(function() {
6. var location = $(this). Parent(). Find(' img '). attr(' src ');
8. var title = $ (this Parent (). Find "strong"
10. $('. Thumbwrapper '). Nailthumb({imageUrl:location, imagefromwrappinglink:true, title :title, titlewhen: ' Load ', replaceanimation:' animate ' });
12. });
16. $('. Thumbwrapper '). Nailthumb({});
18. });

In the above code we use the default option to generate thumbnails for the default picture, and then click to generate thumbnails of the various sizes of the specified picture.

Css

Here we pre-define thumbnails of different sizes, as follows:

2. . Bhoriz {
4. Width: 280px;
6. Height: 180px;
8. }
12. . Square {
14. Width: 100px;
16. Height: 100px;
18. }
22. . bsquare {
24. Width: 150px;
26. Height: 150px;
28. }
32. . Horiz {
34. Width: 100px;
36. Height: 70px;
38. }
42. . Vert {
44. Width: 100px;
46. Height: 130px;
48. }

Please refer to the online demo for results. I hope you like this plugin, can be effectively applied to the Web site and Web application development. If you like our article, please leave us a message. Thank you! Original link: http://www.gbtags.com/gb/share/5860.htm

Create a beautiful thumbnail web app using the awesome jquery thumbnail build plugin nailthumb