Question

我的fancybox滚动条有问题。 Fancybox只使用浏览器滚动条。我需要在fancybox弹出窗口中固定高度的fancybox和滚动条。

我的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

当type的fancybox content为image时，您无法达到目标，但作为解决方法，您可以将其设置为html并重新构建{{1}使用content回调如：

beforeLoad

或者，您可以设置固定的$('.fancybox').fancybox({ beforeLoad: function () { this.content = "<img src='" + this.href + "' alt='' />" }, type: "html" }); height与height API选项合并。

另外，请确保您的图片具有响应性，并添加此CSS声明：

maxHeight

参见 JSFIDDLE

没有fancybox滚动条

1 个答案: