Fancybox动态宽度/高度问题-如何在默认情况下进行编码

Question

我只是想实现这个：

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=',''));
    }
});

但我想知道，如果用户没有像上面的例子那样在URL中传递width/height（人们忘记或搞砸了拼写或其他什么），我必须在fancybox声明中添加什么，以便它有默认的width/high作为依据。。。只是在想我该如何防止这样的问题？

Answer 1

将fitToView与minWidth、minHeight、maxWidth和maxHeight一起设置回退大小，如：

$(".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
});

另一方面，为了避免人们混淆url的问题，您可以使用（HTML5）data-*属性来传递这些值，如：

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

更清洁。然后在你的fancybox中，在回调中相应地设置大小，如

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

选中此JSFIDDLE，第一个链接具有data-*属性，并相应地获取大小。第二个则不是这样，它根据回退值