如何阻止fancybox调整大小

How can I stop fancybox from resizing?

本文关键字:调整 fancybox 何阻止      更新时间:2023-09-26

我是一个初学者,所以我对编码的了解有限。我正试图创建一个使用fancybox2作为图片库的网站。我为每张照片添加了一个类似Facebook的按钮和Facebook评论框。这是我的代码:

$(".fancybox").fancybox({

beforeShow: function () {
    if (this.title) {
    currentHref = this.href;
    this.title += '<br /> <br/>'; // Line break after title

    this.title += '<div class="fb-like" style="margin:0; padding:0" data-href="' + currentHref + '" data-width="400" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>';
    this.title += '<br />'; // Line break after title
    this.title += '<div class="fb-comments" data-href="http://mundonimona.com/' + currentHref + '" data-num-posts="2" data-width="400"></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();

},
helpers: {
    title: {
        type: 'inside'
    }
}

});

http://jsfiddle.net/brewhildah/999Ly4vm/9/

Facebook点赞和评论框在网站上起了作用。问题是,在加载Facebook插件后,照片的大小被调整了。它们都变小了。我如何确保即使在加载了Facebook内容后,幻灯片也不会调整大小(这样查看照片和从一张幻灯片移动到另一张幻灯片都会顺利进行)。

谢谢你的帮助!

您可以组合fitToViewmaxWidth API选项来实现这一点,例如:

$(".fancybox").fancybox({
    fitToView: false,
    maxWidth: "85%",
    // other API options
});

查看分叉的JSFIDDLE