建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

响应式按比例生成图片缩略图的jQuery插件qthumb

来源:易助科技网浏览量:11收藏

简介


jjqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图,该插件可以通过计算来在老浏览器上生成响应式效果。 在老的浏览器中它能够替代background-size属性。


响应式按比例生成图片缩略图的jQuery插件qthumb-示例图


参数介绍:


属性/方法类型默认值说明
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>



相关链接


官方文档 :  http://pakcheong.github.io/jqthumb/

Github 地址 :https://github.com/pakcheong/jqthumb