3

こんにちは私は自分のウェブサイトにライトボックスエフェクトを作成しようとしていますが、ここの画像は私のコードです。

<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のソースはクリックするたびに変化するため、コンテナの幅と高さは画像サイズに応じて変化します。コンテナは最初のクリックでは中央に配置されませんが、2番目のクリックでは中央に配置されます。2つのループは次の場合にのみ使用されます。 img.lightboximgのsrcを変更します。

私が理解していないもう1つのことは、lightboximg変数の幅と高さを取得しようとすると、常に0が返されることです。それはなぜですか。誰かが私のコードの何が問題なのか、そしてdiv＃lightboxを中央に配置するためにそれを修正する方法を教えてもらえますか？

EDIT：arrは、多数のオブジェクトを含むarayです。各オブジェクトには、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 に答える