这是之前制作的创建固定大小的缩略图的JS脚本的jQuery插件版本,依然具有图片预载功能,且脱离了css文件,不需要手动创建容器。
使用方法
1、调用jQuery类库和插件(如果已经调用了jQuery,可以省略第一行)
[syntaxHighLighter brush="js"]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.QQWorld_PhotoCutter-min.js"></script>[/syntaxHighLighter]
2、在需要缩略的图片上加上特定标记
[syntaxHighLighter brush="html"]<img rel="cut_me" src="photo.jpg" />
<a href="#"><img rel="cut_me" src="photo.jpg" /></a>[/syntaxHighLighter]
3、激活插件的方法(将图片缩略为宽度150x120,并将图片外的容器class设置为myPhoto):
[syntaxHighLighter brush="js"]$("img[rel='cut_me']").QQWorldPhotoCutter({
width: 150,
height: 120,
class_name: 'myPhoto'
});[/syntaxHighLighter]
更新历史
- v1.0.3 - 2012.3.15 - 因为ie7下不能将json类的名字设置为class,将class改为class_name
- v1.0.2 - 2012.3.2 - 修复判断图片缓存预载之前就运行缩略功能,导致无法获取图片的width的问题
- v1.0.1 - 2011.10.19 - 添加可以设置外部容器class的功能
- v1.0.0 - 2011.10.18
[demo demo='#' download='https://www.qqworld.org/demo/jQuery/qqworld-photocutter/jquery.QQWorld_PhotoCutter.lastest.zip']
QQWorldPhotoCutter - 简单的jQuery缩略图插件 有 1 篇评论
前排支持下 😉