1

我正在尝试为我的网站制作照片库（我是一名摄影师），但是当我放置照片（一张有 7-8 mb，4300x3000）时，它们的加载速度非常慢。我在网上搜索了我应该怎么做，我发现了一些关于 ajax 上传的东西（Facebook 正在使用同样的东西，ajax）。实际上，我的画廊与 FB 照片画廊非常相似，但没有评论之类的东西。我只需要照片的小缩略图，以及当您单击缩略图时照片恢复正常尺寸的效果。我创建了一个这样的照片库，唯一的问题是加载时间，它几乎让我的电脑崩溃，而且我没有时间手动调整每张照片的大小。那么，关于这个 ajax 上传，我应该知道些什么呢？如何调用自动调整照片大小的函数，像脸书一样吗？这就是我在照片库中所取得的成就（我放了一些网络照片作为示例）http://jsfiddle.net/EChhQ/4/

HTML

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="http://1.bp.blogspot.com/_CWcsH3xUmrE/TOWrqLVp--I/AAAAAAAAAG0/hN0hBxYVyTo/s1600/Poze%252520Roz%252520Dragalase.jpg"><img  id="imgredus" src="http://1.bp.blogspot.com/_CWcsH3xUmrE/TOWrqLVp--I/AAAAAAAAAG0/hN0hBxYVyTo/s1600/Poze%252520Roz%252520Dragalase.jpg" alt="" /></a>
                        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="http://www.zega.ro/imagini/produse/mici/pulover-carina-portocaliu__azz53218_50_extra.jpg"><img id="imgredus" src="http://www.zega.ro/imagini/produse/mici/pulover-carina-portocaliu__azz53218_50_extra.jpg" alt="" /></a>
4

2 回答 2

0

您可以按如下方式实现图像大小调整功能：

var max_w = 600; // set the image maximum width
var max_h = 300; // set the image maximum height
$("img").each(function(i) { // match all img elements
    var this_w = $(this).height();
    var this_h = $(this).width();
    // check which side of the image needs to be kept to the maximum 
    if (this_w/this_h < max_w/max_h) {
        var h = max_h;
        var w = Math.ceil(max_h/this_h * this_w);
    } else { // calculate proportionally
        var w = max_w;
        var h = Math.ceil(max_w/this_w * this_h);
    }
    // assign new height and width values using CSS
    $(this).css({ height: h, width: w });
});
于 2013-03-23T22:52:03.493 回答
0

我认为您正在寻找类似http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/#prettyPhoto

于 2013-03-24T10:47:08.557 回答