Setting (max) widths on certain/specified Fancybox overlays.

[grimski]

I’m using Fancybox on a website I’m working on and it works great. The only issue I have is I’d like a couple of the overlays to appear narrower due to the content that’s in them. ‘Auto’ is not good enough as it gives unpredictable results and the contained elements often wrap and appear cramped.

Here’s a basic working Fancybox example which uses a max-width: http://codepen.io/moy/pen/YGgjqv

Now, I’ve noticed you can use a data attribute to set a width within the HTML – great! …This does seem to work at first glance, though annoyingly you do now need to set a width onto every Fancybox or it gets set at the smallest width possible.

But unfortunately I’ve noticed that now my Fancybox overlays aren’t responsive at all. Example here: http://codepen.io/moy/pen/JRzBJp

I’ve commented out the width and maxWidth values in the Javascript. That allows the width set in the HTML to work but my overlay won’t become responsive unless I take out the line fitToView: false. This really isn’t ideal as it changes the way my Fancybox’s work. It changes the overflow behaviour and I’d like the browser to scroll rather than the actually box/overlay.

Does anyone have any ideas on this? I’ve been stuck for a while now, it’d be great to get some help!

Thanks in advance!

[Shikkediel]

From a first glance at the issue… you don’t really have to initiate the settings for all elements at once? Couldn’t you give the items you are referring to a different class and specify some of the the fancybox properties differently?

[grimski]

Hi @Shikkediel, do you mean essentially have a different script for the alternative fancybox?

Something like:

$(".fancybox-narrow").fancybox({

I think I’ve tried that before but you essentially need to duplicate the entire block of code then just change the width to whatever you want? Sorry if that’s not what you meant!

[Shikkediel]

Close to what I meant… but then only for the few properties that differ. So something like this:

$('.fancybox').fancybox({ // most of the properties
$('.fancybox.small').fancybox({ // setting only width
$('.fancybox.wide').fancybox({ // idem

[grimski]

I’ve tried that before but Fancbox seems to reset itself. So if you use another class you need to declare everything again, otherwise it uses the default values on the ‘second’ class.

$(document).ready(function() {
    $(".fancybox").fancybox({
        margin: [20,20,20,20],
        padding: [20,20,0,20],
        openEffect: 'fade',
        openEasing: 'easeInQuad',
        openSpeed: 400,
        title: false,
        scrolling : 'no',
        fitToView : false,
        autoSize: false,
        height: 'auto',
        width: '100%',
        maxWidth: 960
    });

    $('.fancybox.fancybox--narrow').fancybox({
        maxWidth: 640,
    });
});

I’ve just tried with the code above and on the .fancybox--narrow element the settings declared on the default .fancybox weren’t inherited :/

[Shikkediel]

That sucks, too bad it’s flawed like that. Back to the think tank then…

[Shikkediel]

The bad news is, fancybox is a single-instance script.

That post on SO indeed confirms it. I guess that the only approach would then be to write another script, interacting with the opening and closing of a modal, that overwrites the fixed inline width. Really just some adaptation of this:

beforeLoad: function() {
      this.width = parseInt(this.element.data('fancybox-width'));
      this.height = parseInt(this.element.data('fancybox-height'));
    }

Either that or several complete instances of the method, applied to different classes as mentioned before.

I think I’ll have to read up a bit on the plugin before I can add anything sensible.

[Shikkediel]

Check this out… the width of the first example is overwritten based on it’s small class that’s used by the function in beforeLoad. Second link gets the default width:

Pen

Like this you should be able to change any individual size matched to some class. But let me know if I’m missing the point anywhere.

[grimski]

Yes it’s a lot tricker than I thought it would be haha!

That beforeLoad looks like it works great though! I tried amending it to:

beforeLoad: function() {
    if ($(this.element).hasClass('small')) this.maxWidth = '640';
}

Which looks like it works as well!

[grimski]

Although it seems to work, I get an error with that code.

if ($(this.element).hasClass('fancybox--small')) this.maxWidth = '640';

I get an error “Expected ‘{‘ and instead saw ‘this’.” – does it just need to brackets around the bit we’re changing? Like…

beforeLoad: function() {
    if ($(this.element).hasClass('fancybox--small')) {
        this.maxWidth = '640';
    }
}

[Shikkediel]

Can’t replicate it myself, seems to work alright when I try. It even recognises it’s a pixel value (while the unit measurement is missing). Brackets shouldn’t matter with a single line to execute. I’m suspecting a typo somewhere… got a quick fork maybe?

[grimski]

Ah I think it’s because I was using CodeKit to compile my scss files. It runs checks on javascript as well (if enabled) so I imagine it’s just being very strict. If I add the brackets it gets rid of the error anyways and it still works. Probably better to do that than turn the syntax checker off – seeing as I’m terrible with javascript!

[Shikkediel]

seeing as I’m terrible with javascript!

I recall seeing some decent code by your hand…
This script’s a bit confusing though, this not being the current element but the fancybox object itself you’re defining at that moment. So changing maxWidth actually “literally” sets the property that is right above it. Seems to only be working with integers, pixel values and percentages by the way.

8-)

[grimski]

Thanks a lot! Likely other pieces of code I’ve cobbled together though which didn’t quite work …which is why I post it here haha!

I ended up using

beforeLoad: function() {
    if ($(this.element).hasClass('fancybox--small')) {
        this.maxWidth = 600;
    }
}

Seems to do the job. It’s not something I’ve ever needed and I’ve used the plug-in for years. Very much a fringe case. So, as long as that maxWidth works as it is, it’ll certainly do! Going to do some further browser testing now though :)

[Author]

Posts