CODEWITHSUNDEEP
jqueryfancyboxfancybox-2
Crazy Serb
Crazy Serb

Reputation: 76320

Fancybox dynamic width/height issue - how to code in the defaults to fall back on?

I am just trying to implement this:

http://jsfiddle.net/BJNYr/

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    type: 'iframe',
    autoSize : false,
    beforeLoad : function() {                    
        this.width = parseInt(this.href.match(/width=[0-9]+/i)[0].replace('width=',''));  
        this.height = parseInt(this.href.match(/height=[0-9]+/i)[0].replace('height=',''));
    }
});

But I am wondering what do I have to add to the fancybox declaration so that it has default width/height to fall back on, in case the user doesn't pass width/height in the URL like in the example above (people forget or mess up the spelling or something)... just thinking how do I prevent issues like that?

Upvotes: 0

Views: 5757

Answers (1)

JFK
JFK

Reputation: 41143

Use fitToView along with minWidth, minHeight, maxWidth and maxHeight to set you fallback size like :

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    type: 'iframe',
    autoSize : false,
    beforeLoad : function() {                    
        this.width = parseInt(this.href.match(/width=[0-9]+/i)[0].replace('width=',''));  
        this.height = parseInt(this.href.match(/height=[0-9]+/i)[0].replace('height=',''));
    },
    // fallback size
    fitToView: false, // set the specific size without scaling to the view port
    minWidth : 200, // or whatever, default is 100
    minHeight: 300, // default 100
    maxWidth : 800, // default 9999
    maxHeight: 900  // default 9999
});

On the other hand, to avoid the issues of people messing up with the url, you could use (HTML5) data-* attributes to pass those values like :

<a class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/" data-width="500" data-height="200">Open 500x200</a>

...which is cleaner. Then in your fancybox set the size accordingly within the callback like

beforeShow: function () {
    this.width = $(this.element).data("width") ? $(this.element).data("width") : null;
    this.height = $(this.element).data("height") ? $(this.element).data("height") : null;
}

Check this JSFIDDLE, the firs link has data-* attributes and gets the size accordingly. The second doesn't so gets the size according to the fallback values

Upvotes: 4

Related Questions