Fancybox Resize to fit content, without title

Question

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.

Pictogram

May be you can try something after the page is completely loaded? $(window).load(function(){... – Kyd

Answer 1

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.

Pictogram

Answer 2

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

Altorelievo

This was extremely helpful, in conjunction with @user568109's other answer. I added my own answer and marked it as answered. I'm not sure if that's technically the correct way to do it, but I wanted anyone who searched to see my method. The end result is not perfect... it doesn't allow resize when changing the window size after loading, but it works for me. I wish I had some bounty to give you, but all I can give is my thanks. Thank you! Here's the finished result: thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-0#0 – Pictogram

@Joe Cole I believe the correct method would be to mark this answer as correct (so Samuel would get the credit), and then add your final method to the question as an edit. – Centipede

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

Disreputable

This works to fix the initial re-sizing problem. If I set the title div to height:0px !important; then the picture resizes appropriately as I would like it to do. However, when I set the height to auto afterwards in order to expand the div to fit the content, then the entire thing resizes again. If I turn off auto-sizing, and manually call an update and then set the title height to auto, it still resizes, even though resizing was turned off. It seems that $.fancybox.update(); turns auto-resizing on again or something? – Pictogram

That is unfortunate that height gets set to auto each time fancybox.update() is called. I would love to just ignore auto resizing, but I need it to size correctly at first, then show the title, then prevent any further auto sizing... and it doesn't seem any of the current fancybox options allow that. – Pictogram

Thank you for your nice comment on my site. It's a fun hobby, as is the photography. I have figured out a solution that works for me and still allows dynamic width/height (only on the initial load, not if the window resizes). I used a combination of your technique and others and I wish I had some bounty to give you in return for your help. Unfortunately, all I have to give is my profuse thanks. Thank you. – Pictogram

Answer 4

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

Altorelievo

I understand that. The issue is that fancybox resizes taking the photo AND title into account. So if there are a lot of comments, it's resizing the photo REALLY tiny to include all of the title area on the screen. – Pictogram

thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8 But right now, I have a min-height and width set, so it doesn't actually resize it that small. However, the photo itself runs off the screen on smaller screens (like 720p), and it is not as big as it could be on larger screens (1080). Basically, I need some way to change the resize function to only take the photo itself into account instead of the photo+title. – Pictogram

Looks like you need to set the minimum height dynamically based on the sum of user's window height plus the height of the comments. – Altorelievo

That sounds like the best answer. I'll give it a try! – Pictogram

Ok, so I found out something interesting. If I set the css for the title to zero, the photo sizes properly. Then I was changing the css height of the title to auto, and the fancybox would resize again. So I added autoresize and fitToView false, but then the photo would not resize when first opening. So I called $.fancybox.update() before changing the title height to auto, but it updates for the photo like I want, but then it seems to switch fitToView back on and resizes again when I change the title height to auto! This is frustrating... any thoughts on that? I thought it would work... – Pictogram

I shall help you start a bounty on the question to pull in more people. – Altorelievo

Answer 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

Chough