Question

我只是想实现这个：

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

但是我想知道我必须添加到fancybox声明中，以便它具有默认的宽度/高度以便重新开启，以防用户没有在URL中传递宽度/高度，如上例所示（人们忘记或弄乱拼写或其他东西）......只是想着如何防止这样的问题？

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

另一方面，为了避免人们弄乱网址的问题，您可以使用（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-*属性并相应地获取大小。第二个不是根据回退值获得大小

Fancybox动态宽度/高度问题 - 如何在默认值中编码以重新开始？

1 个答案: