2014-08-28 2 views
1

fancybox 스크롤바에 문제가 있습니다. Fancybox는 브라우저 스크롤바를 사용합니다. fancybox 팝업창에 고정 높이의 fancybox와 scrollbar가 필요합니다. 아니요 fancybox 스크롤바

http://prntscr.com/4hgcci

내 HTML 페이지 :

<html> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <link rel="stylesheet" href="jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="jquery.fancybox-thumbs.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="jquery.jscrollpane.css" type="text/css" media="screen" /> 
    <script type="text/javascript" src="jquery.fancybox.js"></script> 
    <script type="text/javascript" src="jquery.fancybox-thumbs.js"></script> 
    <script type="text/javascript" src="jquery.jscrollpane.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#fancy').fancybox({ 
       type:'image', 
       fitToView: false, 
       width: '90%', 
       height: '90%', 
       autoSize: false, 

     } 
    }); 
    </script> 

</head> 
<body> 
<a id= "fancy" href="landing_v2.jpg"><img width="200" src="landing_v2.jpg"></a> 
</body> 
</html> 

답변

0

당신은 content의 fancybox type 그러나 해결 방법으로, 당신은 html로 설정할 수 image 때 원하는 것을 달성하고 사용 content 구도를 다시 할 수 없습니다 beforeLoad 콜백 :

$('.fancybox').fancybox({ 
    beforeLoad: function() { 
     this.content = "<img src='" + this.href + "' alt='' />" 
    }, 
    type: "html" 
}); 

선택 사항으로 heightmaxHeight API 옵션을 결합하여 고정형 height을 설정할 수 있습니다.

img { max-width: 100% } 

JSFIDDLE

+0

너무 감사 참조 :

또한 이미지는이 CSS 선언을 추가 반응 있는지 확인! 귀하의 솔루션이 작동합니다. –