Fancybox - 다른 오버레이의 너비 설정

Question

Fancybox에서 열리는 몇 가지 콘텐츠 블록이 있습니다. 이 모든 것은 작동하지만 두 상자의 내용은 아주 작으며 실제로 1000px 너비의 팬시 박스 오버레이를 보증하지 않습니다. 이 상자의 너비를 다른 값으로 설정하는 방법이 있습니까?

예를 들어 콘텐츠 상자 (# login-overlay)에 너비를 추가하려고 시도했지만 Fancybox는 오버레이를 여는 상대 링크를 클릭하면 콘텐츠 주변에 빌드되므로 무시합니다.

가 여기 내 자바 스크립트입니다 :

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     margin: [20,20,20,20], 
     padding: [20,20,0,20], 
     openEffect: 'fade', 
     openEasing: 'easeInQuad', 
     openSpeed: 400, 
     title: false, 
     //closeBtn: false, 
     //autoCenter: false, 
     scrolling : 'no', // turns off scrolling in box. 
     fitToView : false, // allows box to overflow out of viewport. 
     autoSize: false, // needs to be turned off for width/maxWidth to work. 
     height: 'auto',  // if autoSize is set to 'false', this needs to be 'auto' so height matches content. 
     width: '100%', 
     maxWidth: 960, 
     helpers: { 
      overlay: { 
       // locked: false, // Prevents jump to top of window when opening a fancybox. 
       showEarly : false 
      } 
     }, 
     tpl: { 
      closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>' 
     } 
    }); 
}); 

당신은 내가 기본 크기의 폭을 볼 수 maxWidth를 사용하고 볼 수 있듯이. 두 상자의 거의 절반이 될 수 있습니다. 나는 auto을 설정하려고 시도했는데 CSS의 콘텐츠 블록에 설정된 너비를 상속받을 수 있는지는 알지만 작동하지 않는 것 같습니다.

$(".fancybox-narrow")에 대한 전체 스크립트 작성이 필요하지 않은 아이디어가 있습니까? 이 내 코드와 함께 작동하지 않지만 http://jsfiddle.net/wgPTR/

:

편집 는 사실 오버레이의 폭을 설정 data-fancybox-width를 사용하는 Fancybox 페이지의 예를 발견했다. 너비는 설정되지만 더 이상 반응하지 않습니다. fitToView에서 false으로 설정하면 작동하는 것처럼 보이지만 세로 공간이 충분하지 않을 때 fancybox 작물이 보이고 스크롤 할 수 없게됩니다.

그냥 업데이트 UPDATE, 여기에 작업 (기본값) fancybox의 CodePen입니다 : http://codepen.io/moy/pen/YGgjqv 또한 폭 설정 data-fancybox-width을 사용하는 포크 ​​버전 만든

-하지만 작동 불행히도 fancybox는 더 이상 반응하지 않습니다. 이 기능을 작동시키는 유일한 방법은 내 수직 스크롤을 깨는 fitToView: false을 꺼내는 것입니다.

아이디어가 있으십니까?

Answer 1

나는 문 경우 다음 beforeLoad를 사용하여 (CSS의 트릭 포럼에서 많은 도움과) 솔루션을 발견하는 것 :

beforeLoad: function() { 
    if ($(this.element).hasClass('fancybox--small')) { 
     this.maxWidth = 600; 
    } 
} 

는 기본적으로 클래스 fancybox--small 확인하고 그것을 현재의 경우 fancybox의 maxWidth을 수정합니다.

IE8에서 문제가 없는데 IE8로 확인하는 것이 좋습니다. 다행히도 이것은 다른 사람에게 도움이되지만, 문제가 있으면 알려주세요.)