使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用

• 在线演示1
•  
• 本地下载
 

 

 

 

 

大家在网站开发和web应用中常常需要处理图片，因为用户上传的图片往往尺寸大小各不相同，如何能够生成统一尺寸的缩略图往往是让我们头疼的问题，常规的方式基本都是使用后台程序PHP，JSP等处理上传后的图片，针对网站或者应用具体需要来切割指定大小的缩略图。主要问题在于你需要开发对应后台相关程序，并且你一旦指定了缩略图大小后，以后如果希望能够随时修改的话，往往需要对后台代码进行修改，非常麻烦！今天我们将介绍一款超强的jQuery缩略图生成插件 - NailThumb，使用这个插件可以帮助你在前台生成无图像扭曲的缩略图，而且支持前台裁剪，添加图片说明及其动画等功能，相信大家一定会喜欢！

主要特性

• 自动处理图形分别率，不会生成扭曲的图片
• 能够添加缩略图特效
• 支持裁剪
• 方便的添加图片说明

如何使用

导入jQuery类库，插件js和css，如下：

1. <linkrel="stylesheet"href="css/jquery.nailthumb.1.0.min.css">
2. <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
3. <scriptsrc="js/jquery.nailthumb.1.0.min.js"></script>

 

调用插件方法，如下：

1. $('.thumbwrapper').nailthumb({});

 

使用图片的容器元素即可生成缩略图。

图片缩略图展示应用

这里我们将开发一个图片缩略图展示应用，主要代码如下：

HTML

1. <ulid="container">
2. <lidata-tag="Ducati"><strong>Hypermotard 796 Silver</strong><imgsrc="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><ahref="#"class="viewthumb">View Thumbnails</a></li>
3. <lidata-tag="Ducati"><strong>Hypermotard 796 Red</strong><imgsrc="img/motor/HM-796_2001_R_[298x168].jpg"><ahref="#"class="viewthumb">View Thumbnails</a></li>
4. <lidata-tag="Ducati"><strong>Hypermotard 1100 Evo Red</strong><imgsrc="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"><ahref="#"class="viewthumb">View Thumbnails</a></li>
5. </ul>
6.  
7. <ulid="thumb">
8. <liclass="thumbwrapper bhoriz"><ahref="#"><imgsrc="img/motor.png"title="280x180"/></a></li>
9. <liclass="thumbwrapper bsquare"><ahref="#"><imgsrc="img/motor.png"title="150x150"/></a></li>
10. <liclass="thumbwrapper vert"><ahref="#"><imgsrc="img/motor.png"title="100x130"/></a></li>
11. <liclass="thumbwrapper square"><ahref="#"><imgsrc="img/motor.png"title="100x100"/></a></li>
12. <liclass="thumbwrapper horiz"><ahref="#"><imgsrc="img/motor.png"title="100x70"/></a></li>
13. </ul>

 

 

 

定义俩个容器元素，一个包含了需要生成缩略图的图片，另外一个元素包含了生成的不同大小的缩略图。

Javascript 

1. $(function(){
2. $('.viewthumb').click(function(){
3. var location = $(this).parent().find('img').attr('src');
4. var title = $(this).parent().find('strong').html();
5. $('.thumbwrapper').nailthumb({imageUrl:location, imageFromWrappingLink:true, title:title, titleWhen:'load', replaceAnimation:'animate'});
6. });
8. $('.thumbwrapper').nailthumb({});
9. });

 

以上代码中我们使用缺省的选项针对缺省的图片生成缩略图，然后点击来生成指定图片的各种大小的缩略图。

CSS

这里我们预先定义不同尺寸的缩略图，如下：

1. .bhoriz {
2. width:280px;
3. height:180px;
4. }
5.  
6. .square {
7. width:100px;
8. height:100px;
9. }
10.  
11. .bsquare {
12. width:150px;
13. height:150px;
14. }
15.  
16. .horiz {
17. width:100px;
18. height:70px;
19. }
20.  
21. .vert {
22. width:100px;
23. height:130px;
24. }

 

效果请大家参考在线演示。希望大家喜欢这个插件，能够有效的应用到网站和web应用开发中。如果你喜欢我们的文章，请给我们留言。谢谢！

原文链接：http://www.gbtags.com/gb/share/5860.htm