2012-07-14 77 views
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#燈箱?

編輯:ARR是一個包含若干個objects.In的我已經存儲了src和其他參數

編輯每個對象的阿雷:我discoverd東西很奇怪,而試圖使代碼工作。如果我在點擊處理程序中添加了一個警告框,那麼容器會被集中到什麼地方?

+4

這是相當多的代碼發佈的問題。你能否試圖縮小到一個最小的例子,顯示問題的行爲?簡短的問題往往得到更好的答案 – 2012-07-14 11:24:55

+0

循環所做的唯一的事情就是改變燈箱的來源img它不是特別的關於它 – user1525474 2012-07-14 11:38:39

+0

最好不要使用'alert()'並使用'console.log'瀏覽器消息,因爲alert()會導致已知的干擾。 – arttronics 2012-07-14 12:13:29

回答

1

css方法怎麼樣?

.lightbox { 
     position:absolute; 
     left:50%; 
     top:50%; 
     width:300px; 
     height:200px; 
     margin-top:-100px; 
     margin-left:-150px; 
}