Question

在我的html页面中，我有链接导致非静态图像（根据url查询参数绘制）。

如何创建此图片的缩略图？

当用户点击缩略图时，将打开一个包含大图片的新页面（或在同一页面中，并不重要）。

是否可以控制裁剪或缩小缩略图？

我看到了这个例子，但这假设我有静态和本地存储的图像。没有？

<A HREF="paperboy.gif"><IMG SRC="pb1.gif"></A>

Answer 1

这是一个快速的小jQuery插件，我刚刚为此鞭打..请记住它不是一个合适的缩略图 - 它仍然是刚刚缩放的原始图像。

这不适用于旧版本的IE。

更改zoom，top和left以更改裁剪尺寸。

http://jsfiddle.net/fyg042m4/1/

<强> HTML

<a class="thumbify" href="http://www.wallpaperup.com/uploads/wallpapers/2014/10/21/489485/b807c2282ab0a491bd5c5c1051c6d312.jpg"></a>

JQ插件

(function($) {
    $.fn.thumbify = function(opts) {
        var url = this.attr('href');
        var $thumb = $('<div class="thumbnail"></div>');

        $thumb.css({
            'background': 'url('+url+')',
            'width': opts.width+'px',
            'height': opts.height+'px',
            'background-size': (opts.width * opts.zoom)+'px ' + (opts.height * opts.zoom)+'px',
            'background-repeat': 'no-repeat',
            'background-position': opts.left +'px ' + opts.top +'px'
        });

        this.append($thumb);
    };
}(jQuery));

<强> JS

jQuery(function($) {
    $('.thumbify').thumbify({
        width: '150',
        height: '100',
        zoom: 2.5,
        top: -50,
        left: -40
    });
});

如何从http回复图像创建缩略图？

1 个答案: