3

嗨，我正在尝试为我的网站创建一个灯箱效果，但我似乎对 centerint 有问题，这里的图像是我的代码：

<div id="lightbox">
    <img src="img/accrington-stanley.jpg" alt="Accrington Stanley" class="lightboximg"/>
</div>
  jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");

      this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
      return this;
  } 

   var lightbox = $('div#lightbox');

            var lightboximg = $('img.lightboximg');

  portfolio.on("click","li" ,function(){
                var curent = $(this).attr("data-id");
                for(var i=0;i<arr.length;i++){
                    if(curent === attrValue){
                        for(var index in obj){
                                var attrName2 = index;
                                var attrValue2 = obj[index];
                                if(attrName2 === "img"){
                                    lightboximg.attr("src" , attrValue2);    
                                }     
                  }
                }

                lightbox.center().fadeIn();


            })

img.lightboximg 的来源在每次点击时都会发生变化，因此容器的宽度和高度会根据图像大小而变化。容器不会在第一次点击时居中，而是在第二次点击时居中。这两个循环仅用于更改 img.lightboximg 上的 src。

我不明白的另一件事是，如果我尝试获取 lightboximg 变量的宽度和高度，它总是返回 0。为什么会这样？谁能告诉我我的代码有什么问题以及如何纠正它以使 div#lightbox 居中？

编辑：arr 是一个包含许多对象的数组。在每个对象中，我都存储了 src 和其他参数

编辑：我在尝试使代码正常工作时发现了一些非常奇怪的东西。如果我在点击处理程序中添加一个警报框，容器就会居中，这与任何事情有什么关系？

4

1 回答 1

1

CSS方法怎么样？

.lightbox {
      position:absolute;
      left:50%;
      top:50%;
      width:300px;
      height:200px;
      margin-top:-100px;
      margin-left:-150px;
 }
于 2012-07-15T18:42:18.960 回答