jqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图,在老的浏览器中它还能够替代background-size属性。jqthumb兼容性超强,可以工作在所有现代浏览器甚至是IE6+上,jQuery 1.3以上版本即可运行。它还可以在Zepto(通过zepto-data插件)v1.1.3+上运行。
这个jquery插件可以帮助我们按比例生成图片缩略图。大家可能知道在处理缩略图的时候使用 background-size: cover; 可以解决许多棘手问题。但是 background-size: cover; 在IE6、IE7和IE8下不能正常工作。而该插件正是弥补了这个缺陷。
使用方法
使用以下的简单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>
在页面中引入jQuery和jqthumb.min.js文件:
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jqthumb.min.js"></script>
然后按下面方法调用插件:
<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. 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 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(){ $('.example1').jqthumb('kill'); }); // kill all command $('#kill').click(function(){ $.jqthumb('killall'); }); }); </script>
BOWER
bower install jqthumb
可用参数
- source:图片的URL属性。例如:
<img src="path/image.jpg" />
的source是src
。$('img').jqthumb({ source : 'attr-src' // DEFAULT: src });
- classname:生成的缩略图的class名称。当你想使用外部css来渲染缩略图时该参数十分有用。
$('img').jqthumb({ width : 200, // DEFAULT: 100 height : '100%' // DEFAULT: 100 });
- position:通过 X 和 Y作为关键参数来定义一个对象。y用于跳转缩略图上下位置,x用于跳转缩略图的左右位置。注意: position.x 和 position.y必须在定义的
width
和height
的范围里面。如果你用百分比来定义position.x 和 position.y,请确保它们在0-100%之间。$('img').jqthumb({ position: { x : 20, // DEFAULT: '50%' y : '30%' // DEFAULT: '50%' } });
- show:是否在处理完成后显示缩略图:
$('img').jqthumb({ show : false // DEFAULT: true });
- responsive:该参数只是在浏览器不支持 CSS3 的时候才使用。为了在旧的浏览器上完成响应式效果,该插件在
$(window).resize()
事件被触发的时候会重新计算。设置为0则在旧的浏览器中不使用响应式效果。在现代浏览器中不支持禁用响应式特性,可以使用method :"native"来禁止它。/* responsive only works for native method / older browsers */ $('img').jqthumb({ responsive : 10 // DEFAULT: 20 }); /* to disable responsive feature in modern method / browsers, switch method to native */ $('img').jqthumb({ method : 'native', // DEFAULT: auto responsive : 0 // DEFAULT: 20 });
- zoom:放大或缩小缩略图:
$('img').jqthumb({ zoom : 3 // DEFAULT: 1 });
- method:该按比例是否缩略图插件提供两种方法:一种使在浏览器支持 CSS3 的时候使用,一种是浏览器不支持CSS3的时候使用。有时候你可能需要切换这两种方法来做些测试。默认情况下,该插件会自动检测浏览器是否支持CSS3然后调用相应的方法。
$('img').jqthumb({ method : 'native' // Availability: "auto", "modern", "native". DEFAULT: auto });
- before:这是在计算开始前的一个回调函数。该函数以参数的形式返回原始图片的source和对象。如果你在初始化的时候使用了多个对象class名称,那么这个函数会被调用两次。
$('img').jqthumb({ before : function(originalImage){ console.log(originalImage); } });
- after:这是在计算结束后的一个回调函数。该函数以参数的形式返回新生成的缩略图对象。如果你在初始化的时候使用了多个对象class名称,那么这个函数会被调用两次。
$('img').jqthumb({ after : function(newThumb){ $(newThumb).fadeIn(); } });
- done:这是在所有图片对象都被处理完毕后的一个回调函数。它返回所有缩略图的数组对象。
$('img').jqthumb({ done : function(thumbnails){ for(i in thumbnails) $(thumbnails[i]).fadeIn(); } });
可用命令
$('img').jqthumb('kill'); // destroy the plugin $.jqthumb('killall'); // destroy all generated thumbnails on the page
更多的使用方法
... <img src="path/image.jpg" /> ... <script type="text/javascript"> $(function(){ $('img').jqthumb({ width : 300, height : 200 }); }); </script>
... <div data-jqthumb-src="path/image.jpg"></div> ... <script type="text/javascript"> $(function(){ $('div').jqthumb({ source : 'data-jqthumb-src' }); }); </script>
... <div style="width: 100%; height:500px;"> <img src="path/image.png" /> </div> ... <script type="text/javascript"> $(function(){ $('div').jqthumb({ width : '100%', height : '100%' }); }); </script>
... <img class="my-img" data-jqthumb-src="path/image1.png" data-jqthumb-width="200" data-jqthumb-height="200" /> <img class="my-img" data-jqthumb-src="path/image2.png" data-jqthumb-width="200" data-jqthumb-height="180" /> <img class="my-img" data-jqthumb-src="path/image3.png" data-jqthumb-width="200" data-jqthumb-height="160" /> <img class="my-img" data-jqthumb-src="path/image4.png" data-jqthumb-width="200" data-jqthumb-height="140" /> <img class="my-img" data-jqthumb-src="path/image5.png" data-jqthumb-width="200" data-jqthumb-height="120" /> ... <script type="text/javascript"> $(function(){ $('.my-img').each(function(){ var $img = $(this); $img.jqthumb({ source : $img.attr('data-jqthumb-src'), width : $img.attr('data-jqthumb-width'), height : $img.attr('data-jqthumb-height') }); }); }); </script>
... <img class="my-img" src="path/image.jpg" /> ... <script type="text/javascript"> $(function(){ $('.my-img').jqthumb({ width : 300, height : 300, show : false, // By default the image would be shown immediately after processing. To disable, set it to false after : function(croppedImg){ // This callback returns an object $(croppedImg).fadeIn(); // This would fade in the cropped image } }); }); </script>
... <img class="my-img" src="path/image1.jpg" /> <img class="my-img" src="path/image2.jpg" /> <img class="my-img" src="path/image3.jpg" /> ... <script type="text/javascript"> $(function(){ $('.my-img').jqthumb({ width : 300, height : 300, show : false, // By default the image would be shown immediately after processing. To disable, set it to false done : function(allCroppedImgs){ // This callback returns an array for(i in allCroppedImgs){ $(allCroppedImgs[i]).fadeIn(); // This would fade in the cropped images one by one } } }); }); </script>
更多关于该按比例生成图片缩略图插件的信息请参考:https://github.com/pakcheong/jqthumb