的fancybox扩展问题在移动设备使用低高度横向放置

问题描述：的fancybox扩展问题在移动设备使用低高度横向放置

我使用的fancybox v2.1.5以快速响应的页面设计。我遇到的问题是更小的移动设备，比矩形更矩形。

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

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

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

我没有成功尝试过使用Fancybox CSS和媒体查询，但是在这里阅读其他帖子表明你需要javascript功能来有效地做到这一点，虽然我很坚实的HTML和CSS，但我仍然相当不稳定的JavaScript。

所需的功能：

我希望能够能测试“短”屏幕的高度和格式化的fancybox标题给尽可能多的房地产商的形象，尽可能。

理想情况下，这将通过控制Fancybox标题字体大小并允许标题框超出容器边界进行扩展。

任何编码建议形式的帮助，或指向我，我amy错过的其他职位将不胜感激。

来源

2014-11-03 MarkN

是的，这是冠军的问题。这就是为什么你可以使用按钮助手，然后用户可以切换更大的图像。您还可以使用媒体查询在最小高度隐藏标题。使用Fancybox很多年后，我切换到Magnific Popup。 http://brutaldesign.github.io/swipebox/也很棒。 – Christina 2014-11-03 06:19:47

您可以使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

来源

2014-11-03 08:26:23 JFK

的fancybox扩展问题在移动设备使用低高度横向放置

回答

相关问题