0

ポートフォリオ内の一部の画像のサイズを変更するために、JQuery スクリプトを作成しようとしています。横に大きい画像もあれば、縦に大きい画像もあるので、中央部分だけをサムネイル表示するのが私の考えです。それをクリックすると、実際の画像が表示されます (外部スライダーでいいですか?)。

したがって、私が行った小さなスクリプトは次のとおりです。

$(document).ready(function(){

    var w_div = $('#portfolio div').width();
    var h_div = $('#portfolio div').height();

    $('#portfolio div a img').each(function() {

        /* Correction estimate: div.width - photo.width / 2 */
        var posLeft = -(w_div - $(this).width())  / 2;
        var posTop  = -(h_div - $(this).height()) / 2;

        /* Assignment of new measures to the current image */
        $(this).css({left: posLeft+'px', top: posTop+'px'});

    });

});

ループを使用して、img グループを取得し、それを反復処理して正しい中心位置を計算しようとします。しかし、なぜ最初の画像でしか機能しないのかわかりません。つまり、このスクリプトはすべての画像の css を変更し、最初の画像のみを正しく測定します。posLeft と posTop の割り当てが変わらないのはなぜですか? 私はそれを理解していません...

(すべての画像の css ファイルに 'position: relative' という文があることを忘れていましたか?

ありがとう！

編集:PHPを使用してサーバー側でこのタスクを実行する方が簡単で良いアイデアでしょうか?

4

1 に答える 1

3

私はこれを読むのが速すぎました。だから私は自分の答えを大幅に編集しています。

  1. $(document).ready() は、DOM がレンダリングされるとすぐに実行されます。画像はまだ読み込まれておらず、これまでのところ DOM が保持している唯一の情報は img 属性の内容です。これはコンテナ div にも当てはまります。これは、画像に合わせて高さをまだ伸ばしていません。それがおそらく、毎回同じ寸法を取得する理由です。理想的には、画像の幅と高さ、およびコンテナー div を手動で設定する必要があります。それをしたくない場合は、$(window).load() を使用して、すべての画像が読み込まれ、DOM が再レンダリングされるのを待つことができますが、これは非常に明白です。

  2. 'left' と 'top' は、'position: absolute;' の要素でのみ機能します。'position: relative;' を含むコンテナー内。したがって、画像は絶対的である必要があり、その上の div は左と上が機能するために相対的である必要があります。

  3. サムネイルを作成しようとしているので、幅と高さの代わりに左と上を使用している理由がわかりません。もう 1 つの方法は、幅と高さの最大値を計算し、目的の幅または高さに縮小することです。

    var max_width = 20; var max_height = 20;
$('#portfolio div a img').each(function() {
    var w = $(this).width();
    var h = $(this).height();
    var scale = null;
    if (w >= h) { if (w > max_width) { scale = 1 / (w / max_width); } } 
    else { if (h > max_height) { scale = 1 / (h / max_height); } }
    if (scale) {
        $(this).width(w * scale);
        $(this).height(h * scale);
    }
});

これにより、適切な解決策を見つけられるようになることを願っています。

于 2011-09-18T14:59:20.977 に答える