Question

我在我的网站上使用Fancybox来显示照片。我在加载照片后在标题区域中动态添加（通过JavaScript）社交按钮和Facebook评论。我遇到的问题是，如果我让它像往常一样调整大小，它会调整大小以尝试在屏幕上显示标题内容（由于评论，这可能会相当长）。

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

我通过将minHeight设置为683来解决这个问题，这可以防止它使照片变得非常小并且将评论也适合屏幕。这里的问题是它在1080p屏幕上看起来很好，但是任何小尺寸都意味着照片太大而且也会从屏幕上流出。

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

目前，内容已调整大小以适应一些评论，但受到minHeight的限制。我想要的是照片要大得多，填满屏幕的大部分，只有一点标题区域，然后用户可以向下滚动查看评论等。

Answer 1

您可能想尝试一下：

使用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

Answer 2

您可以使用填充和/或边距选项在fancybox的顶部设置空格，以使照片在屏幕上更加居中。

padding - 围绕内容的fancyBox内部空间。可以设置为数组 -   [顶部，右侧，底部，左侧]

margin - 视口和fancyBox之间的最小空间。   可以设置为数组 - [顶部，右侧，底部，左侧]

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

Answer 3

我检查了你的网站，哪个非常好，检查尺寸问题。我注意到了一些事情，这是我的建议和解释。

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;。因此，它会不断调整其中的注释，增加其高度，这会导致图像高度出现问题。要解决此问题，请将其样式设置为height: 200px;。如果它不起作用，请尝试放置!important。由于所有这些都是动态的，请检查css和javascript。

<强>更新

根据您的评论，每次调用fancybox.update（）时，height都会设置为auto。因此，您需要修改您的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选项。

Answer 4

我找到了一个适合我的解决方案。

这主要基于此处发布的所有答案，所以非常感谢你。如果可能的话，我会给你所有的赏金。

我做的是这个。

在CSS中设置.fancybox-title{height:0px !important;}，并在下方直接添加其他样式（稍后使用）：.fancybox-title-autoheight{height:auto !important;}

接下来，在fancybox jquery调用中，设置autoResize: false和min-Height: $(window).height()-100，＆lt; - 100就是我想要的边距，以便用户注意到下面有更多内容图像。

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

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

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

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

Answer 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

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

5 个答案: