How can I get text content to resize correctly when using Fancybox 2?

18
votes

I am creating a one-page website in HTML5 using the Unsemantic framework, linking to hidden divs that display in Fancybox 2 and am having trouble getting all the different types of content to size correctly.

There are three divs - one containing text inside a div that is wrapped inside a hidden div, so I can manipulate the content accordingly, one containing an image gallery, and one containing a link to a YouTube video. I have created a hidden class that I call via CSS as so:

HTML for the text portion:

<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">

HTML for the video portion:

<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>

CSS:

.hidden {
    overflow:hidden;
    display:none;
}

Fancybox is being called inside the <head> tags:

<script type="text/javascript">
$(document).ready(function() {
  $("#fancybox-gallery").click(function() {
    $.fancybox.open([
      {
        href : "image_1.jpg",
      }, {
        href : "image_2.jpg",
      }, {
        href : "image_3.jpg"
      }
    ], {
      helpers : {
        thumbs : {
          width: 75,
          height: 50
        }
      }
    });
  });
});
</script>

With the Fancybox 2 defaults (autoSize:true, autoWidth:false and autoHeight:false), images resize accordingly, video resizes accordingly, but the text link defaults to minimum height and maximum width:

Enter image description here

If I set autoSize and autoWidth to False, then set autoHeight to True, images still resize in the same way, the text boxes resize to about 50% of the browser window, and the video displays with a portion of white on the right hand side:

Enter image description here

Enter image description here

To be honest, I like the size of the text boxes in this example, and they act responsively, but the video box is wrong so it's a bit annoying.

So far I've tried the following with no success:

  • Removing the class="hidden" and replacing it with inline "display:none" script and then display:inline-block in the CSS, on the advice of a friend, but I realized that it wouldn't work;
  • Giving the hidden text div a grid setting in line with the rest of the HTML, but this just caused the div to resize, and not the Fancybox.
  • I can set a static width, but it needs to be responsive, so that is not acceptable for my needs;

So, where am I going wrong? Could the answer lie in setting autoSize:true, and adding an em or % width to the divs that need it?

I'm also thinking about calling a script upon open that just affects the divs I need, but I am not sure if that's possible. I'm not a JavaScript user day to day, so my knowledge is poor.

5
jqueryfancyboxfancybox-2
@tomdot I think is a bad idea to have inline videos within hidden divs. Why you don't link them directly and open them in fancybox? jsfiddle.net/nnq8fgdy – JFK
@JFK Hang on...you've done it! I was calling fancybox.iframe, whereas you are using data-fancybox-type. Once I amended the code to this, it resizes correctly. I was under the impression from the documentation that Fancybox automatically figured out the data type. If you could answer, I will accept. – tomdot
you say that's exactly what you are doing but the code you posted doesn't reflect that, this is why I asked you to post all the relevant html and jQuery code ... but you think because it's working (according to you) then you don't need to post it. You keep people guessing and that makes it difficult for anyone to help. Again, I don't see any code in your question that reflects the problem. A code that opens a gallery with screen shots of videos and inline content!?!?!? – JFK
Is not what I require ... you may have missed this stackoverflow.com/help/how-to-ask – JFK
I think it's been discussed that the question as presented was fine, and as discussed if I needed to provide further information then it should have been asked for correctly. That clearly didn't happen. I'm no longer wanting to discuss this further, so thank you for your help (as you have done so in the past IIRC), and I genuinely hope that my muddling through has not distracted you too much from your day to day work. If it's important to you then of course I will accept a correct answer from you. – tomdot

5 Answers

1
votes

Can you not set it's max-width?

In the first image you have with text, what happens if you set it to that and apply:

width: 100%;
max-width: 500px; /* or whatever you like */
margin: 0 auto;
left: 0;
right: 0;

to the white outer (or outermost) container in your screenshot.

If fancybox is overriding it, use !important.

Really, in this scenario, you only need fancybox to either load it or display it, then position it vertically. You should be able to center it horizontally yourself with a few lines of CSS. Granted we don't have a working demo, so there could be something I'm missing (like how it's sizing it's content, or overflowing). But I'd be happy to amend my answer if you can post a demo.

0
votes

Have you tried using Flexbox? My go-to reference for this set of CSS properties: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also, you can set static values with javascript and change them as the window resizes to ensure responsiveness. A timeout and interval might be needed to prevent stressing the browser when resizing.

0
votes

I'd recommend looking into using Viewport Units for your font sizing (vh,vw,vmax,vmin,rem):

http://caniuse.com/#feat=viewport-units

http://www.sitepoint.com/new-css3-relative-font-size/

0
votes

This is how I am using fanybox. There is a "afterShow" callback you can use to manipulate the displayed box. I am not sure about using it with videos - may then there is another container selector than $('img.fancybox-image')? Just try...

    jQuery(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        padding    : 0,
        margin     : 5,
        fitToView : true,
        autoScale : true,
        nextEffect : 'fade',
        prevEffect : 'none',
        afterShow : function() {
            var img = $('img.fancybox-image');
            var screen = {
                w : $(window).width(),
                h : $(window).height(),
                r : $(window).width() / $(window).height()
            };
            var imgDims = {
                w : img.width(),
                h : img.height(),
                r : img.width() / img.height()
            };
            if(imgDims.r > screen.r) {
                img.width(screen.w - 40);
                img.height(Math.round((screen.w - 40) / imgDims.r));
            } else {
                img.height(screen.h - 40);
                img.width(Math.round((screen.h - 40) * imgDims.r));
            }
            this.autoHeight = true;
            this.autoWidth = true;
        }
    });
0
votes

I fixed a similar issue (w/ fancybox v2.+) in which the div.fancybox-wrap element was properly changed to have a height of "auto", but the width was unchanged with its original fixed pixel value. This caused the right border to be covered up by the wider fancybox-wrap element.

This issue occurred after increasing both the width and height of the div.fancybox-inner element.

This was fixed by adding the following "New" lines to the fancybox setup script.

$(".fancybox").fancybox({
    closeClick: false,
    autoScale: true,            //New
    autoDimensions: true,       //New
    autoSize: true,             //New
    autoResize: false,          //New
    autoCenter: true,           //New
    width: 'auto',
    height: 'auto',
    openEffect: 'elastic',
    closeEffect: 'elastic',
    openSpeed: 600,
    closeSpeed: 200
});

The following line was also added to the click event script that processed the resizing.

$("div.fancybox-wrap").css('width', 'auto');    //Adjust wrapper width after resize