Fancybox 调整大小以适应内容，没有标题答案

【问题标题】：Fancybox Resize to fit content, without titleFancybox 调整大小以适应内容，没有标题
【发布时间】：2013-02-18 02:22:24
【问题描述】：

我在我的网站上使用 Fancybox 来显示照片。加载照片后，我在标题区域动态添加（通过 JavaScript）社交按钮和 facebook cmets。我遇到的问题是，如果我让它正常调整大小，它也会调整大小以适应屏幕上的标题内容（由于 cmets，这可能会变得相当长）。

我的问题是：fancybox 是否可以调整大小以适应屏幕上的照片，但允许标题区域溢出屏幕？

我通过将 minHeight 设置为 683 在一定程度上解决了这个问题，这可以防止它使照片变得超小并且也无法将 cmets 安装到屏幕上。这里的问题是它在 1080p 屏幕上看起来不错，但任何较小的东西都意味着照片太大并且也会溢出屏幕。

如果我解释得不好，请在我的网站上查看：http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8

现在，内容已调整大小以适应一些 cmets，但受到 minHeight 的限制。我想要的是照片更大，占据屏幕的大部分，下面只有一点点标题区域，然后用户可以向下滚动以查看 cmets 等。

【问题讨论】：

页面完全加载后您可以尝试一下吗？ $(window).load(function(){...

标签： jquery fancybox facebook-like facebook-comments

【解决方案1】：

您可以使用填充和/或边距选项在花式框顶部设置一个空间，使照片在屏幕上看起来更加居中。

padding - fancyBox 内围绕内容的空间。可以设置为数组 - [上右下左]

margin - viewport 和 fancyBox 之间的最小空间。可设置为数组-[上、右、下、左]

http://fancyapps.com/fancybox/#docs

【讨论】：

我明白这一点。问题在于，fancybox 会根据照片和标题调整大小。因此，如果有很多 cmets，它会将照片的大小调整得非常小，以包括屏幕上的所有标题区域。
thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8 但是现在，我设置了最小高度和宽度，所以它实际上并没有把它调整得那么小。但是，照片本身在较小的屏幕（如 720p）上会从屏幕上消失，并且没有大屏幕（1080）上的那么大。基本上，我需要一些方法来更改调整大小功能，只考虑照片本身而不是照片+标题。
看来您需要根据用户窗口高度的总和加上 cmets 的高度来动态设置最小高度。
这听起来是最好的答案。我试试看！
我会帮助你在这个问题上开始赏金以吸引更多的人。

【解决方案2】：

我检查了您的网站，顺便说一句，它非常好，以检查尺寸问题。我注意到了一些事情，这里是我的建议和解释。

fancybox 的行为类似于容器 div，因此它会根据子 div 的内容进行调整。 fancybox-skin 有两个直接子 div fancybox-outer 和 fancybox-title fancybox-title-inside-wrap

<div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;">
    <div class="fancybox-outer">
        <div class="fancybox-inner" style="overflow: visible; width: 493px; height: 323px;">
            <img class="fancybox-image" src="/photos/Places/Garden of the Gods/IMG_0345.jpg" alt="">
        </div>
        <a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a><a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>
    </div>
    <div class="fancybox-title fancybox-title-inside-wrap" style="height: auto;">
    ...
    </div>
</div>

fancybox-title fancybox-title-inside-wrap 设置了 height: auto;。因此，它会通过增加其高度来不断调整其内部给定的 cmets，这会导致图像高度出现问题。要解决此问题，请将其样式设置为 height: 200px;。如果不起作用，请尝试输入!important。由于所有这些都是动态的，请检查 css 和 javascript。

更新

根据您的评论，每次调用 fancybox.update() 时，高度都会设置为自动。所以你需要修改你的fancybox选项，以防止自动调整大小。这是你可以做的：

$("a.yourlink").fancybox({
    'width'             :   500,
    'height'            :   200,
    'autoScale'         :   false,         //if using older fancybox
    'autoSize'          :   false,         //if using newer fancybox
    'autoDimensions'    :   false,
});

您应该查看为 fancybox 2.0+ 提供的 here 选项。

【讨论】：

这可以解决初始调整大小的问题。如果我将标题 div 设置为 height:0px !important;然后图片会按照我的意愿适当调整大小。但是，当我之后将高度设置为自动以扩展 div 以适应内容时，整个事物会再次调整大小。如果我关闭自动调整大小，并手动调用更新，然后将标题高度设置为自动，它仍会调整大小，即使调整大小已关闭。似乎 $.fancybox.update();再次打开自动调整大小还是什么？
不幸的是，每次调用 fancybox.update() 时高度都会设置为自动。我很想忽略自动调整大小，但我首先需要它正确调整大小，然后显示标题，然后阻止任何进一步的自动调整大小......而且目前的任何fancybox 选项似乎都不允许这样做。跨度>
感谢您对我的网站的好评。这是一个有趣的爱好，摄影也是。我找到了一个适合我的解决方案，并且仍然允许动态宽度/高度（仅在初始加载时，而不是在窗口调整大小时）。我结合了你的技术和其他技术，我希望我能得到一些赏金来回报你的帮助。不幸的是，我所要表达的只是我的衷心感谢。谢谢。

【解决方案3】：

你可能想试试这个：

使用JS计算窗口的宽高，动态设置图片的尺寸，使用回调beforeShow and onUpdate：

beforeShow: function() {
    $('.fancybox-image')
        .width($(window).width())
        .height($(window).height());
},
onUpdate: function() {
    $('.fancybox-image')
        .width($(window).width())
        .height($(window).height());
},

您可能还想看看这些类似的问题：

Fancybox Height Resize Dynamic Content

【讨论】：

结合@user568109 的其他答案，这非常有帮助。我添加了自己的答案并将其标记为已回答。我不确定这在技术上是否是正确的方法，但我希望任何搜索过的人都能看到我的方法。最终结果并不完美......加载后更改窗口大小时不允许调整大小，但它适用于我。我希望我有一些赏金给你，但我能给予的只有我的感谢。谢谢！这是完成的结果：thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-0#0
@Joe Cole 我相信正确的方法是将这个答案标记为正确（这样 Samuel 会得到功劳），然后将您的最终方法添加到问题中作为编辑。

【解决方案4】：

我想出了一个适合我的解决方案。

这在很大程度上基于此处发布的所有答案，因此感谢您。如果可能的话，我会给你们一个赏金。

我做的是这个。

在CSS中设置.fancybox-title{height:0px !important;}，并在下面直接添加一个额外的样式（以后会用到）：.fancybox-title-autoheight{height:auto !important;}

接下来，在fancybox jquery 调用中，设置autoResize: false 和min-Height: $(window).height()-100，

最后，在afterShow函数中，设置$(".fancybox-title").addClass("fancybox-title-autoheight");

这会在最初打开时正确调整照片的大小，并允许在下面显示我想要的 cmets。唯一剩下的问题是调整窗口大小时。我尝试删除 autoheight 类，调用 update，然后再次添加 CSS 属性，但它似乎不起作用。目前，这对我来说是一个可以接受的解决方案。

查看结果（可能需要清除缓存，我最近一直在努力）：http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8

感谢所有参与的人！如果有一些方法可以将多个答案标记为正确，请告诉我，我会这样做，以便我编译的原始想法能够得到认可。

【讨论】：

【解决方案5】：

如果您的 fancybox 已经打开并且想要调整大小，那么下面的代码会帮助您。

$.ajax({
            url: 'YOUR URL',
            data:'DATA WANT TO TRANSFER',
            type: 'post'
            dataType: "text",
            success:function(result){                       
                //PLAY WITH RESULT SET

                $.fancybox.toggle();

            },
            error:function(request,error){
                alert("Error occured : "+error);

            }
        });

参考来自：Resize Fancybox

【讨论】：