jqthumb 按比例生成图片缩略图插件

PetitQ 图片/图形 2018-11-14 1.91K 0 0

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>
```

可用参数

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>
```

jqthumb 按比例生成图片缩略图插件

已有 476 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

jqthumb 按比例生成图片缩略图插件

使用方法

可用参数

可用命令

使用方法

jqthumb 按比例生成图片缩略图插件

相关文章

CSS3鼠标滑过图片快速切换展示效果

鼠标滑过图片3D透视jQuery特效插件

基于 three 炫酷动画景观特效

发表回复取消回复

热销模板

图片/图形

使用方法

可用参数

可用命令

使用方法

jqthumb 按比例生成图片缩略图插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复