1

私は自分のウェブサイト (私は写真家です) のフォト ギャラリーを作成しようと何日も試みていますが、写真 (1 つは 7 ～ 8 MB、4300x3000) を配置すると、読み込みが非常に遅くなります。どうすればいいのかウェブで検索したところ、ajaxアップロードについて何かが見つかりました（Facebookも同じこと、ajaxを使用しています）。実際、私のギャラリーは FB のフォトギャラリーによく似ていますが、コメントなどはありません。写真の小さなサムネイルと、サムネイルをクリックすると写真が通常のサイズになる効果だけが必要です。そのようなフォト ギャラリーを作成しました。唯一の問題は読み込み時間です。コンピュータがクラッシュしそうになり、すべての写真を手動でサイズ変更する時間がありません。では、この ajax アップロードについて何を知っておくべきでしょうか? 写真のサイズを自動的に変更する関数を呼び出すにはどうすればよいですか? Facebookのように？これは、私がフォトギャラリーで得た方法です（例としていくつかのWeb写真を掲載しています）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 に答える