javascript - 具有低高度横向方向的移动设备中的 Fancybox 缩放问题

Question

问题描述:

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

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

然而，当我将设备更改为横向时，Fancybox 会缩小其高度以响应较短的屏幕高度。

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

我曾尝试使用 Fancybox CSS 和媒体查询但没有成功，但阅读此处的其他帖子表明您需要 javascript 功能才能有效地执行此操作，虽然我对 html 和 CSS 相当扎实，但我对 javascript 仍然相当不稳定。

期望的功能:

我希望能够测试“短”屏幕高度并设置 Fancybox 标题的格式，以便为图像提供尽可能多的空间。

理想情况下，这将通过控制 Fancybox Title 字体大小并允许标题框超出容器边界来实现。

如能提供编码建议或向我指出我错过的其他帖子，我们将不胜感激。

Answer 1

您可以使 fancybox 仅水平响应，这样无论屏幕尺寸如何，它都会根据需要扩展其高度。这样图像就不会缩小(包括它们的title)以适应视口(viewport)的高度(尽管您可能需要向下滚动才能看到更大图像的其余部分及其标题)

如果这个替代方案满足您的需要，您需要在您的自定义初始化脚本中组合一组 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