Fancybox可以仅对水平内容进行水平响应吗? [英] Can Fancybox be responsive only horizontally for tall content?

问题描述

我的网站上有一些非常高的图像.我希望这些图像在水平方向而不是垂直方向做出响应.如果它们符合浏览器的高度，它们就会变得太小而无法正常显示.

I have a site with some very tall images. I'd like for these images to respond in a responsive way horizontally, but not vertically. If they conform to the height of the browser, they become too small to see properly.

有没有一种简单的方法可以实现我所缺少的功能?

Is there a simple way to accomplish this that I'm missing?

请参见下面的示例.单击第二个缩略图"bswift"，然后单击一个小的灰色正方形以启动Fancybox. http://www.eaaronrossdesign.com/index2.php

See an example below. Click on the second thumbnail "bswift", then a small grey square to launch Fancybox. http://www.eaaronrossdesign.com/index2.php

推荐答案

尝试结合使用fitToView和maxWidth API选项，例如:

Try combining the fitToView and maxWidth API options like :

$('.thumbs_small').fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    prevEffect: 'fade',
    nextEffect: 'fade',
    fitToView: false, // images won't be scaled to fit to browser's height
    maxWidth: "90%" // images won't exceed the browser's width
});

检查 JSFIDDLE

Check JSFIDDLE

这篇关于Fancybox可以仅对水平内容进行水平响应吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！