没有花式框滚动条

Question

我对fancybox滚动条有问题。 Fancybox仅使用浏览器滚动条。 我需要fancybox弹出窗口中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>

Answer 1

当fancybox type的content为image ，您无法实现所需的content ，但是，作为一种解决方法，您可以将其设置为html并使用beforeLoad回调来重新组成content ，例如：

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

（可选）您可以设置要结合使用height和maxHeight API选项的height的固定height 。

另外，请确保您的图片能够响应，并添加以下CSS声明：

img { max-width: 100% }

参见JSFIDDLE