0

Webページに実際の画像のサムが表示され、画像をクリックすると元の画像（元のサイズ）が表示され、htmlの「img」要素を保持するdivが次のように変更されるギャラリービューアを作成しようとしています可視（それ以外の場合はデフォルトで非表示に設定されています）、その間、画像の寸法を取得しようとしているため、異なる寸法の画像を適切に中央に配置できます。それらの幅と問題は、ページがロードされた後に初めて親指をクリックするたびに、画像の幅を取得するステートメントが0を送信し、その後、ページをリロードせずに他の画像をクリックすると(前のものを含む）前の画像の寸法を示しており、機能する場合と機能しない場合があります（ほとんど機能しない）、助けてください。JavaScriptコードは以下です。

// JavaScript Document
$(document).ready(function() {
$.post(


"loadup.php",
        {
            refer:"yes"
        },function(response){
            $("#gallery_view_tab").html(response);
            initAll();
    });
});

function initAll(){
    $("<div id='imgViewer'></div>").appendTo("body"); //set up image viewer
    $("#imgViewer").insertBefore("#monster_wrap"); //set before monster_wrap

    var thumbimgs = $(".thumbimg");
    for(i=0; i<thumbimgs.length; i++){
        var thumbimg = thumbimgs[i].id;
        var thumbid = '#'+thumbimg;
        $(thumbid).click(loadImgviewer);
    }
}

function loadImgviewer(){
    var imgLink = this.getAttribute("data-link");
    $("<img id='closeImgviewer' src='images/close.png' /><img src='' id='imgview' />").appendTo("#imgViewer");
    $("#imgview").attr('src', imgLink);
    $("#imgViewer").css('visibility', 'visible');
        imgwidth = $("#imgview").width();
        screenwidth = $(window).width();
        var pos = (screenwidth - imgwidth)/2;
        $("#log").html(pos);
        $("#imgview").css('margin-left', pos);

$("#closeImgviewer").click(unloadImgviewer); //set click event handler on image view closer

}

function unloadImgviewer(){
    $("#imgViewer").css('visibility', 'hidden');
    $("#imgview").attr('src', '');
    $("#imgViewer").empty();
}
4

1 に答える 1

0

コードを少し書き直しました。

$(document).ready(function() {
    $.post(
        "loadup.php",
         {
             refer:"yes"
         },
         function(response){
             $("#gallery_view_tab").html(response);
             initAll();
         }
    );
});

function initAll(){
    $("<div id='imgViewer'></div>").appendTo("body"); //set up image viewer
    $("#imgViewer").insertBefore("#monster_wrap"); //set before monster_wrap
    $(".thumbimg").on('click', loadImgviewer);
}

function loadImgviewer(){
    var imgwidth, pos,
        screenwidth = $(window).width();
    var imgLink = this.getAttribute("data-link");
    $("<img id='closeImgviewer' src='images/close.png' /><img src='' id='imgview' />").appendTo("#imgViewer");
    $("#imgview").attr('src', imgLink).on('load',function(evt){
        imgwidth = $(this).width();
        pos = (screenwidth - imgwidth) / 2;
        $("#log").html(pos);
        $("#imgview").css('margin-left', pos);
        $("#imgViewer").css('visibility', 'visible');
    };
    $("#closeImgviewer").click(unloadImgviewer); //set click event handler on image view closer
}

function unloadImgviewer(){
    $("#imgViewer").css('visibility', 'hidden');
    $("#imgview").attr('src', '');
    $("#imgViewer").empty();
}

ぜひお試しください。試していませんが、うまくいくはずです。

于 2012-09-13T08:17:16.697 に答える