0

私のウェブページにはいくつかのサムネイル写真があります。ユーザーがサムネイルの 1 つをクリックすると、フルサイズの写真が開きます。フルサイズの画像はブラウザ ウィンドウに対して大きすぎる可能性があります。それを適合させるために、「setImageDimensions()」と呼ばれるJavaScript関数があります。この関数は、ページの「非表示」入力フィールドに保存されている写真の幅と高さを取得します。問題は、サムネイルの写真をクリックすると、大きな写真が開きますが、サイズが変更されないことです (ブラウザ ウィンドウよりも大きい場合)。height(HTML を「検査」するときに)およびwidth属性が (関数を介して) フルサイズの pic に追加されていることに気付きましたsetImageDimensions()が、これらの値が削除された時点でほんの一瞬だけです。これらの属性が「とどまる」のを妨げているのは私のコードについて何ですか?

Javascript:

function viewImage(photoID) {
    $('div#photo_container'+photoID).load('get_photo.php);
    // the above will load something like <img src="path-to-full-size-pic" />
    setImageDimensions(photoID);
}

function setImageDimensions(photoID) {
    var width = $('#photoWrap'+photoID+ ' input#photoWidth').val();
    var height = $('#photoWrap'+photoID+ ' input#photoHeight').val();

    var windowWidth = $('body').width();
    var windowHeight = $('body').height();

    var newWidth = width; // initialize variable
    var newHeight = height; // initialize variable
    var ratio = 1; // intialize variable

    if( width > windowWidth )
    {
        newWidth = windowWidth;
        ratio = newWidth / width;
        height = ratio * height;
        width = newWidth;

    if( height > windowHeight )
    {
        newHeight = windowHeight;
        ratio = newHeight / height;
        width = ratio * width;
        height = newHeight;
    }

    $('div#photo_container'+photoID+' > img').attr('height', height);
    $('div#photo_container'+photoID+' > img').attr('width', width);
    }
    else if( height > windowHeight )
    {
        newHeight = windowHeight;
        ratio = newHeight / height;
        width = ratio * width;
        height = newHeight;

    if( width > windowWidth )
    {
        newWidth = windowWidth;
        ratio = newWidth / width;
        height = ratio * height;
        width = newWidth;
    }

    $('div#photo_container'+photoID+' > img').attr('height', height);
    $('div#photo_container'+photoID+' > img').attr('width', width);
    }

    var halfWidth = width / 2;
    var halfHeight = (height / 2);

    $('#photo_container'+photoID).css('margin-left', -halfWidth);
    $('#photo_container'+photoID).css('margin-top', -halfHeight);
}

HTML:

<div class="photoWrap" id="photoWrap3">
    <input type="hidden" id="photoWidth" value="someWidth"/>
    <input type="hidden" id="photoHeight" value="someHeight"/>
    <div class="photo_container" id="photo_container3"></div>
    <img id="previewPic3" src="path-to-thumbnail-pic" alt="" onclick="viewImage('3')" />
</div>
4

1 に答える 1

4

にコールバックを設定します。load()

$('div#photo_container'+photoID).load('get_photo.php', function(){
    setImageDimensions(photoID);
});
于 2012-07-15T02:32:43.717 に答える