Fancybox调整大小以适合内容，无标题 [英] Fancybox Resize to fit content, without title

问题描述

我在我的网站上使用Fancybox来显示照片.加载照片后，我会在标题区域动态添加(通过JavaScript)社交按钮和Facebook评论.我的问题是，如果我让它正常调整大小，那么它也会调整大小以尝试将标题内容也显示在屏幕上(由于注释的原因，它可能会变得很长).

我的问题是这样的:是否有可能让fancybox调整大小以适合屏幕上的照片，但允许标题区域从屏幕上溢出?

我通过将minHeight设置为683来解决了这个问题，这可以防止它使照片变得非常小，也可以将注释也适合屏幕.这里的问题是，在1080p屏幕上看起来还不错，但是任何较小的图像都意味着照片太大，并且也会从屏幕上流下来.

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

现在，内容已调整大小以适合其中的一些注释，但受minHeight限制.我想要的是照片要大得多，可以填满屏幕的大部分，下面只有一小部分标题区域，然后用户可以向下滚动以查看评论，等等.

解决方案

我想出了一个对我有用的解决方案.

这很大程度上是基于此处发布的所有答案，因此，谢谢您.如果可以的话，我会给你所有的赏金.

我所做的就是这个.

在CSS中设置.fancybox-title{height:0px !important;}，然后在下面直接添加其他样式(稍后使用):.fancybox-title-autoheight{height:auto !important;}

接下来，在fancybox jQuery调用中，设置autoResize: false和min-Height: $(window).height()-100，<-100只是我想要的边距，以便用户注意到图像下方有更多内容./p>

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

此功能可在最初打开时适当调整照片的大小，并允许根据需要在下方显示评论.唯一剩下的问题是调整窗口大小时.我尝试删除autoheight类，调用update，然后再次添加CSS属性，但是它似乎不起作用.目前，这是我可以接受的解决方案.

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

Right now, the content is resized to fit a bit of the comments in, but is restrained by the minHeight. What I would like is for the photo to be much larger, filling the majority of the screen, with only a little bit of the title area below, and then users can scroll down to view the comments, etc.

解决方案

I figured out a solution that works for me.

This is based heavily off of all the answers posted here, so thank you for that. I would give you all a bounty if possible.

What I did was this.

Set .fancybox-title{height:0px !important;} in CSS, and add an additional style (to be used later) directly below: .fancybox-title-autoheight{height:auto !important;}

Next, in the fancybox jquery call, set autoResize: false, and min-Height: $(window).height()-100, <--the 100 is simply the margin I wanted in order for the user to notice that there is more content below the image.

Finally, in the afterShow function, set $(".fancybox-title").addClass("fancybox-title-autoheight");

This sizes the photo properly when originally opening, and allows the comments to be shown below as I wanted. The only remaining problem is when the window is resized. I tried removing the autoheight class, calling update, and then adding the CSS attribute again, but it does not seem to be working. For now, this is an acceptable solution for me.

Check out the result (may need to clear your cache, I've been working on it very recently): http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8

Thank you to all who participated! If there is some way to mark multiple answers as correct, just let me know and I will do so so that the original ideas I compiled can get recognition.

这篇关于Fancybox调整大小以适合内容，无标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！