Fancybox Resize to fit content, without title

问题

I am using Fancybox on my website to display photos. I add (via JavaScript) social buttons and facebook comments dynamically in the title area after loading the photo. The problem I have is that if I let it resize as normal, it resizes to try to fit the title content on the screen as well (which can get rather long thanks to comments).

My question is this: is it possible to have fancybox resize to fit the photo on the screen, but allow the title area to overflow off the screen?

I have somewhat solved the issue by setting minHeight to 683, which prevents it from making the photo super tiny and fitting the comments onto the screen as well. The problem here is that it looks fine on a 1080p screen, but anything smaller means the photo is too large and flows off the screen as well.

If I'm not explaining it well, please view this on my site: 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.

回答1:

You might want to try this:

Use JS to calculate the width and height of the window, and set the dimensions of the image dynamically, using the callback beforeShow and onUpdate:

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

You might also like to take a look at these similar question(s):

Fancybox Height Resize Dynamic Content

回答2:

You can use the padding and/or margin option to set a space at the top of the fancybox, so the photo looks more centered on-screen.

padding - Space inside fancyBox around content. Can be set as array - [top, right, bottom, left]

margin - Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]

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

回答3:

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+ .

回答4:

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.

回答5:

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

来源：https://stackoverflow.com/questions/15194066/fancybox-resize-to-fit-content-without-title