Colorbox在響應式網站中使用多個實例調整大小

Question

我正嘗試在即將到來的響應式網站中使用colorbox。加載時，我沒有設置初始寬度的問題。你可以在這裏看到。

links4.live('click', function(e) {  
    e.preventDefault(); 

    $(this).tipsy("hide"); 

    $.colorbox({ 
     href: this.href, 
     width: function() { 
      if($('.content').width() < windowWidth3) { 
       eventWidth = view4+'px' 
      } else if(($('.content').width() >= windowWidth3) && ($('.content').width() < windowWidth2)) { 
       eventWidth = view3+'px' 

      } else if(($('.content').width() >= windowWidth2) && ($('.content').width() < windowWidth1) ) { 
       eventWidth = view2+'px' 
      } else { 
       eventWidth = view1+'px' 
      } 

      return eventWidth; 
     }, 
     initialWidth: '100px', 
     initialHeight: '100px', 
     scrolling: false 
    }); 
}); 

我遇到了colorbox resize函數和窗口調整大小函數的問題。我在兩種類型的內容上使用了colorbox，它們具有不同的寬度設置。當我爲colorbox設置窗口調整大小功能時，我需要爲每種內容類型設置不同的調整大小寬度。

窗寬 - 960像素 內容1 - 885px 內容2 - 767px

窗口寬度 - 768px 內容1 - 644px 內容2 - 300像素

$(window).resize(function() { 
    // #1 
    $.colorbox.resize({ 
     width: 644+'px' 
    }); 

    // #2 
    $.colorbox.resize({ 
     width: 300+'px' 
    }); 
}); 

當我嘗試調整內容類型colorbox會將兩種內容類型調整爲單一寬度。如何將resize函數應用於colorbox的特定實例，以便我可以設置不同的寬度？

Answer 1

您一次只能在屏幕上顯示單個顏色框，因此在window調整大小事件中，只需設置當前可見的顏色框的寬度即可。

試試這個。

var currentColorBox = 
links4.live('click', function(e) {  
    e.preventDefault(); 

    $(this).tipsy("hide"); 

    //This will be used in the window.resize event handler 
    currentColorBox = this.href; 

    $.colorbox({ 
     href: this.href, 
     width: function() { 
      .... 
      ... 
     }, 
     initialWidth: '100px', 
     initialHeight: '100px', 
     scrolling: false 
    }); 
}); 

$(window).resize(function() { 
    if(currentColorBox == "specifyCorrectTheUrl"){ 
     $.colorbox.resize({ 
      width: 644+'px' 
     }); 
    } 
    else{ 
     $.colorbox.resize({ 
      width: 300+'px' 
     }); 
});