前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JQuery缩略图插件jqthumb
简介
jjqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图，该插件可以通过计算来在老浏览器上生成响应式效果。 在老的浏览器中它能够替代background-size属性。
参数介绍：
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classname | 'jqthumb' | 缩略图容器的 class | |
| width | 整数 | 100 | 缩略图的宽度，单位为 px |
| height | 整数 | 100 | 缩略图的高度，单位为 px |
| position | {top:'50%', left:'50%'} | 缩略图的位置，默认为 50%，即水平并且垂直居中 | |
| source | 字符串 | ‘src’ | 指定图像源属性，默认为 src |
| showoncomplete | 布尔值 | true | 处理后时候立即显示，如果为 false 则不自动显示，需要额外设置让它显示，比如使用回调函数 after、done |
| before | 函数 | 处理前的回调函数 | |
| after | 函数 | 某一个图片处理后的回调函数 | |
| done | 函数 | 所有图片处理后的回调函数 |
使用
1. 引入 jquery.js 和 jqthumb.js 文件
2. HTML
<div style="width: 100%; height: 400px;">
<img src="path/picture.jpg" class="example1" />
</div>
<div style="width: 400px; height: 400px;">
<img src="path/picture.jpg" class="example2" />
</div>
<button id="kill">Kill</button>
<button id="kill-all">Kill All</button>3. 调用
<script type="text/javascript">
$(function(){
// plugin initialization
$('img').jqthumb({
classname : 'jqthumb', // class name. DEFUALT IS jqthumb
width : '100%', // new image width after cropping. DEFAULT IS 100px.
height : '100%', // new image height after cropping. DEFAULT IS 100px.
position : {
x : '50%', // x position of the image. DEFAULT is 50%. 50% also means centerize the image.
y : '50%' // y position of the image. DEFAULT is 50%. 50% also means centerize the image.
},
source : 'src', // to specify the image source attribute. DEFAULT IS src.
show : false, // TRUE = show immediately after processing. FALSE = do not show it. DEFAULT IS TRUE.
renderPosition : 'before', // available: "before" and "after".
onDemand : false, // TRUE = load image only when scolling position has reached the DOM
onDemandEvent : 'scroll', // available: "scroll", "click", "mouseenter". DEFAULT IS "scroll"
threshold : 0, // used when "onDemand" is set to true AND "onDemandEvent" is set to "scroll". Eg. Start loading the image 200px before scolling position reaches the DOM. DEFUALT IS 0
responsive : 20, // used by older browsers only. 0 to disable. DEFAULT IS 20
zoom : 1, // zoom the output, 2 would double of the actual image size. DEFAULT IS 1
method : 'auto', // 3 methods available: "auto", "modern" and "native". DEFAULT IS auto
reinit : true, // TRUE = to re-init when images is re-initialized for the second time. FALSE = nothing would happen.
error : function(dom, imgUrl){ // callback on error, returns image url
console.log(dom, ' with its url "' + imgUrl + '" is invalid.');
}
before : function(oriImage){ // callback before each image starts processing.
alert("I'm about to start processing now...");
},
after : function(imgObj){ // callback when each image is cropped.
console.log(imgObj);
},
done : function(imgArray){ // callback when all images are cropped.
for(i in imgArray){
$(imgArray[i]).fadeIn();
}
}
});
// kill command
$('#kill').click(function(){
$('.your-dom').jqthumb('kill');
});
// kill all command
$('#destroy-all').click(function(){
$.jqthumb('killall');
});
});
</script>相关链接
Github 地址 ：https://github.com/pakcheong/jqthumb