4

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

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

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

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

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

4

5 回答 5

4

你可能想试试这个：

使用 JS 计算窗口的宽度和高度，并动态设置图像的尺寸，使用回调beforeShow和onUpdate：

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

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

于 2013-03-13T03:01:02.513 回答
2

I checked your site, which btw is pretty nice, to check the sizing problem. I noticed some things so, here are my suggestions and explanation.

The fancybox behaves like a container div so it adjusts to the children divs contents. fancybox-skin has two immediate children divs fancybox-outer and 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>

The fancybox-title fancybox-title-inside-wrap has height: auto; set. So it keeps adjusting to comments given inside it, by increasing its height, which causes problems to your image height. To fix this set its style as height: 200px;. Try to put !important if it does not work. Since all this is dynamic, check css and javascript both.

Update

As per your comment, height is set to auto every time you call fancybox.update(). So you need to modify your fancybox options, to prevent auto resizing. Here is what you can do :

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

You should look into the options given here for fancybox 2.0+ .

于 2013-03-09T20:54:44.460 回答
1

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

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

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

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

于 2013-03-04T03:36:21.903 回答
1

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

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

我做的是这个。

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

接下来，在fancybox jquery 调用中， setautoResize: false和min-Height: $(window).height()-100<-- 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

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

于 2013-03-13T21:35:00.483 回答
0

if you fancybox is already open and want to resize then below code will helps you.

$.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);

            }
        });

Reference from : Resize Fancybox

于 2014-12-23T10:35:08.230 回答