fancybox的寬度和高度問題

Question

當我添加此代碼時，寬度和高度的設置無效

jQuery(document).ready(function() {
  $('a.iframe').fancybox(); 
});

有什么選擇可以解決它？

Answer 1

看看這里的文檔： http ： //fancybox.net/api

您正在使用內聯內容，因此請確保將autoDimensions選項設置為false以及寬度和高度設置。

更新：我成功測試了以下解決方案：

    $('a.fbtag').fancybox({
        autoDimensions: false,
        height: 300,
        width: 400
    }); 

這假定您打開的鏈接的類名是“fbtag”。

Answer 2

花式盒寬度和高度始終隨介質類型而變化。

如果我們提供5 * 5像素圖像 - Fancy Box將顯示圖像尺寸的尺寸。

要抵消媒體尺寸的影響並定義Fancy Box的默認寬度和高度

試試這個：

$.fancybox.open(collection.toJSON(), {
   afterShow :function(){},
   maxHeight    : 600,
   minWidth : 500           
}); 

FancyBox寬度最小 - 500像素。

FancyBox高度將與FancyBox數據成比例，最大高度為600像素。

Answer 3

例如

$.fancybox({
    'content':"This will be the content of the fancybox",
    'width':'500',
    'autoDimensions':false,
    'type':'iframe',
    'autoSize':false
});

Answer 4

$(document).ready(function() {
    $(".fancy-ajax").fancybox({
        type:           'ajax',
        autoDimensions: false,
        'autoSize':     false,
        'height':       'auto'
    });
});

以上代碼對我有用。 但是，我在Twitter Bootstrap中設計。

Answer 5

你可以這兩種方式做到這一點

有了iframe

   $(document).ready(function () {
        $(".fancybox").fancybox({
            width:600,
            height:400,
            type: 'iframe',
            href  : 'url_here'
       });
     })

沒有iframe

 $(document).ready(function () {
    $(".fancybox").fancybox({
        width:600,
        height:400,
        autoDimensions: false,
   });
 })