1

I'm currently using Fancybox 2.1.2 and would like to know how I can create an overlay on my web application. I can set the height and width of the the popup (note... this is not an iframe) and it will adjust with static values, but I would like to be able to set the height to a dynamic value like 80%. I can't seem to get this to work though. When I load fancybox with no height or width set I get this really small lightbox and it does not go to the default values of 600px for height and 800px for width. Is this because I am adding in the HTML for the lightbox dynamically through the content method? I am also adding in content dynamically after the lightbox is done loading. The goal is to create a full overlay for my app with setting height as a percentage.

The current code is:

$.fancybox.open({
    'content' : '\
                  <div class="light_box upload">\
                      <div class="title">Your Photos of '+city+'</div>\
                      <div>\
                          <div class="uploadifive-queue" id="uploadifive-upload_photo-queue"></div>\
                      </div>\
                  </div>'
});

And my CSS is:

.light_box.upload{
    width: 980px;
}
1

1 Answer 1

18

Yes, you can turn off "autoSize" and then set width as "auto":

$.fancybox.open({
    content  : '<div id="test">Lorem ipsum dolor sit ame</div>',
    autoSize : false,
    width    : "auto",
    height   : "80%"
});​

See in action: http://jsfiddle.net/2VmrG/

1
  • This didn't work for me... but what did is adding your max height and width like this... <a .... data-width="1140" data-height="760"> The library handles the resizing on smaller devices.
    – Paul Brady
    Commented Dec 8, 2017 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.