Question

问题描述：

我在响应式页面设计中使用Fancybox v2.1.5。我遇到的问题是较小的移动设备，矩形比方形。

当设备处于纵向方向并且我调用Fancybox时，它会显示到屏幕的宽度，标题文本将包含在图像下方。这不是问题，因为在纵向模式下通常会有很多额外的屏幕空间。

当我将设备更改为横向时，Fancybox会根据较短的屏幕高度缩小其高度。

宽度也明显缩小。由于标题框宽度也由Fancybox容器的宽度控制，该宽度调整为图像宽度，这意味着文本包装更多，并且通常会导致图像缩小，因为它调整得更小以适应所需的空间标题文字包装。

我尝试使用Fancybox CSS和媒体查询都没有成功，但是在这里阅读其他帖子表明你需要javascript功能来有效地做到这一点，虽然我对html和CSS非常稳定，但我仍然对javascript感到不稳定。< / p>

所需功能：

我希望能够测试＆＃34;短＆＃34;屏幕高度和格式化Fancybox标题，尽可能为图像提供尽可能多的空间。

理想情况下，这可以通过控制Fancybox Title字体大小并允许标题框延伸到容器边界之外。

任何有关编码建议形式的帮助或指向我错过的其他帖子都将非常感激。

Answer 1

您只能将fancybox 水平响应，以便根据需要扩展其height，无论屏幕大小如何。这样，图像不会缩小（包括他们的title）以适应视口的height（尽管您可能需要向下滚动才能看到更大图像的其余部分及其title）

如果此替代方案符合您的需求，您需要在自定义初始化脚本中组合一组fancybox的API选项，如：

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        fitToView: false, // won't shrink to fit in the viewport
        maxWidth: "90%", // need to explain?
        helpers: {
            title: {
                type: "inside" // can fit larger title/captions
            }
        },
        beforeLoad: function () {
            // optional:
            // get a large title from a data attribute
            this.title = $(this.element).data("caption");
        }
    });
}); // ready

关于样式化title，您可以随时添加额外的CSS规则（在加载fancybox CSS文件之后）以设置您喜欢的样式，如：

.fancybox-title {
    font-family: verdana, sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #008000;
}

参见 JSFIDDLE

具有低高景观方向的移动设备中的Fancybox缩放问题

1 个答案: