Question

我正在尝试创建一个图库查看器，其中网页显示真实图像的大拇指，然后单击图像时，将显示原始图像（具有原始大小），div保存html“img”元素更改为可见（否则默认设置为隐藏），同时我正在尝试获取图像的尺寸，以便我可以正确地将不同尺寸的图像居中。他们的宽度和问题是，无论何时我在页面加载后第一次点击任何拇指，获取图像宽度的语句发送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();
}

Answer 1

我只是稍微改写了你的代码。

$(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();
}

请尝试我们的。没试过，但我认为它应该有用。

在javascript中声明值后返回零

1 个答案: