0

我正在尝试制作一个画廊查看器，网页在其上显示真实图像的缩略图，然后当单击图像时，显示原始图像（具有原始大小），包含 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 回答