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

Asked 20/7, 2015 at 19:56 Answered 29/8, 2019 at 17:19

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

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.

Allantois answered 20/7, 2015 at 19:56 Comment(11)

I see everything but your fancybox initialization script – Heracles 20/7, 2015 at 22:50

Apologies, I've now added that. – Allantois 21/7, 2015 at 6:4

fancybox is bound to the #fancybox-gallery selector but don't see that selector in your html – Heracles 21/7, 2015 at 13:48

That's because I haven't shown the gallery code as it is working correctly. As explained within the question, the problem is with text and video relating to resizing. The image gallery code is unimportant. – Allantois 21/7, 2015 at 17:1

@Allantois 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 – Heracles 21/7, 2015 at 21:47

That's exactly what I'm doing already, and I am 50-50 on it being a link as opposed to front and centre. The central part to this site is that it is contained within one page, with a streaming music player the central component, so that users can navigate without interrupting the audio. The video will probably be a playlist of a YouTube channel, but still, it brings problems with fighting audio streams. I'm thinking through an alternative, but so far the above is what I've got - complete with the odd sized box. – Allantois 21/7, 2015 at 21:53

@Heracles 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. – Allantois 21/7, 2015 at 22:5

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!?!?!? – Heracles 21/7, 2015 at 22:6

My question was "How can I get text content to size correctly...", not "How can I get my video to size correctly". As it happens, we have both followed the documentation, however, yours appeared to solve the problem in the same way mine should have. Nowhere do you mention that you would like to see ALL of my code, and I would have been happy to oblige as I have done with others.. If you had asked, then agreed I wouldn't have "wasted your time". Let this be a lesson to you - ask openly about what you require and deliver open feedback like a good user should - the whole point of my meta post – Allantois 21/7, 2015 at 22:24

Is not what I require ... you may have missed this stackoverflow.com/help/how-to-ask – Heracles 21/7, 2015 at 22:31

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. – Allantois 21/7, 2015 at 22:43

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.

Preschool answered 20/4, 2016 at 18:47 Comment(0)

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.

Hesperidin answered 27/7, 2015 at 21:18 Comment(0)

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/

Sultry answered 16/8, 2015 at 20:42 Comment(0)

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;
        }
    });

Gilbye answered 28/1, 2016 at 17:6 Comment(0)

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

Isooctane answered 29/8, 2019 at 17:19 Comment(0)

Recommended topics

Hot tags