0

我只是想实现这个：

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

但是我想知道我必须在fancybox声明中添加什么，以便它具有默认的宽度/高度可以依赖，以防用户没有像上面的示例那样在URL中传递宽度/高度（人们忘记或弄乱拼写什么的）......只是想我如何防止这样的问题？

4

1 回答 1

4

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-*属性并相应地获取大小。第二个不会根据后备值获取大小

于 2013-07-06T23:23:34.567 回答