使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
2015-08-11 09:51
726 查看
在线演示1
本地下载
大家在网站开发和web应用中常常需要处理图片,因为用户上传的图片往往尺寸大小各不相同,如何能够生成统一尺寸的缩略图往往是让我们头疼的问题,常规的方式基本都是使用后台程序PHP,JSP等处理上传后的图片,针对网站或者应用具体需要来切割指定大小的缩略图。主要问题在于你需要开发对应后台相关程序,并且你一旦指定了缩略图大小后,以后如果希望能够随时修改的话,往往需要对后台代码进行修改,非常麻烦!今天我们将介绍一款超强的jQuery缩略图生成插件 - NailThumb,使用这个插件可以帮助你在前台生成无图像扭曲的缩略图,而且支持前台裁剪,添加图片说明及其动画等功能,相信大家一定会喜欢!
主要特性
自动处理图形分别率,不会生成扭曲的图片能够添加缩略图特效
支持裁剪
方便的添加图片说明
如何使用
导入jQuery类库,插件js和css,如下:<link rel="stylesheet" href="css/jquery.nailthumb.1.0.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nailthumb.1.0.min.js"></script>
调用插件方法,如下:
$('.thumbwrapper').nailthumb({});
使用图片的容器元素即可生成缩略图。
图片缩略图展示应用
这里我们将开发一个图片缩略图展示应用,主要代码如下:HTML
<ul id="container"><li data-tag="Ducati"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><a href="#" class="viewthumb">View Thumbnails</a></li>
<li data-tag="Ducati"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><a href="#" class="viewthumb">View Thumbnails</a></li>
<li data-tag="Ducati"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"> <a href="#" class="viewthumb">View Thumbnails</a></li>
</ul>
<ul id="thumb">
<li class="thumbwrapper bhoriz"> <a href="#"><img src="img/motor.png" title="280x180" /></a></li>
<li class="thumbwrapper bsquare"> <a href="#"><img src="img/motor.png" title="150x150" /></a></li>
<li class="thumbwrapper vert"><a href="#"><img src="img/motor.png" title="100x130" /></a></li>
<li class="thumbwrapper square"><a href="#"><img src="img/motor.png" title="100x100" /></a></li>
<li class="thumbwrapper horiz"><a href="#"><img src="img/motor.png" title="100x70" /></a></li>
</ul>
定义俩个容器元素,一个包含了需要生成缩略图的图片,另外一个元素包含了生成的不同大小的缩略图。
Javascript
$(function() {$('.viewthumb').click(function(){
var location = $(this).parent().find('img').attr('src');
var title = $(this).parent().find('strong').html();
$('.thumbwrapper').nailthumb({imageUrl:location, imageFromWrappingLink:true, title:title, titleWhen: 'load', replaceAnimation:'animate'});
});
$('.thumbwrapper').nailthumb({});
});
以上代码中我们使用缺省的选项针对缺省的图片生成缩略图,然后点击来生成指定图片的各种大小的缩略图。
CSS
这里我们预先定义不同尺寸的缩略图,如下:.bhoriz {
width: 280px;
height: 180px;
}
.square {
width: 100px;
height: 100px;
}
.bsquare {
width: 150px;
height: 150px;
}
.horiz {
width: 100px;
height: 70px;
}
.vert {
width: 100px;
height: 130px;
}
效果请大家参考在线演示。希望大家喜欢这个插件,能够有效的应用到网站和web应用开发中。如果你喜欢我们的文章,请给我们留言。谢谢!
原文链接:http://www.gbtags.com/gb/share/5860.htm
相关文章推荐
- Jquery操作下拉框(DropDownList)实现取值赋值
- 【技术】jquery常用命令
- jquery获取class的值加入到数组,并判断数组中是否存在特定字符串
- jQuery模仿window7窗口弹出效果
- jQuery radio的取值与赋值
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
- **Jquery-之jqGrid表格插件学习(一)**
- jQuery的remove()方法使用详解
- Jquery 如何获取表单中的全部元素的值
- jQuery的remove()方法使用详解
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- jQuery中prepend()方法使用详解
- 基于Css3和JQuery实现打字机效果
- jquery mobile自定义时间选择器控件
- JQuery AJAX 方法总结:
- JQUERY使用AJAX
- JQuery根据字母检索元素并导航到指定位置
- XXX系统发展综述(SSH+Jquery EasyUI)
- JQuery根据关键字检索html元素并筛选显示