컬러 박스 응답 성있는 사이트에서 여러 인스턴스로 크기 조정

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' 
    }); 
}); 

types 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' 
     }); 
});