Question

对于我的所有照片，我使用没有任何白色边框的fancybox，因此我需要默认填充0。我把它设置为0时遇到了一些麻烦。首先，我尝试在CSS类fancybox-skin中设置它。但这似乎只有在我使用padding: 0px !important;时才有效。所以我决定在js文件jquery.fancybox.js中设置默认值。不太好，我想在CMS中设置更多。

现在我的问题：对于一个iframe，我需要设置一个边框。在Contao中，我只有一个脚本调用所有页面，所以我不能在该脚本调用中设置固定的填充。所以我想将填充值添加到链接并在脚本中读取它。我试着通过fancybox脚本的调用来做到这一点，但我不明白它为什么不起作用：

$(document).ready(function() {
    $(".fancybox").attr('rel', 'gallery').fancybox({
        helpers : {
            title: {
                type: 'over'
            }        
        },
        beforeShow: function () {
            $.fancybox.wrap.bind("contextmenu", function (e) {
                    return false; 
            });
        },
        beforeLoad : function() {         
            this.width  = parseInt(this.element.data('fancybox-width'));  
            this.height = parseInt(this.element.data('fancybox-height'));
            this.padding = parseInt(this.element.data('fancybox-padding'));
        }
    });
});

为什么我需要在该脚本中传输宽度/高度值，这将有效？为什么即使我转移它也不能使用填充值？为什么data-fancybox-group=值有效，即使它没有在脚本调用中传输？

以下是示例：http://www.schwarzwald-ferienhaus-imbirkenweg.de/

使用按钮Sofortangebot abrufen查看它是否有效。

Answer 1

首先，请记住，大多数设置都可以在您自己的初始化脚本中更改，大多数自定义都可以通过fancybox回调来完成，因此不需要使用原始的fancybox js或css文件。

其次，您可以使用所有fancybox元素进行全局设置，并使用（HTML5）data属性为某些元素传递特定设置，并使用jQuery.extend()中的beforeLoad应用这些设置回调所以，有这个html示例：

<a rel="gallery" class="fancybox" href="01.jpg">one</a>
<a rel="gallery" class="fancybox" href="02.jpg" data-padding="20">two</a>
<a rel="gallery" class="fancybox" href="03.jpg">three</a>

注意我们在第二个元素中添加了data-padding="20"属性。

现在，我们可以使用这个单一的脚本：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        padding: 0, // set for all elements
        beforeLoad: function () {
            // check if current element has data-padding attribute
            if (this.element.data("padding")) {
                // get data-padding value 
                var p = this.element.data("padding");
                $.extend(this, {
                    // set padding as array 
                    // [top, right, bottom, left]
                    padding: [p, p, p, p]
                });
            }
        }
    }); // fancybox
}); // ready

使用.extend()时

注意，我们必须将padding值作为数组 [top, right, bottom, left]传递（您可以传递不同的内容）这种方式的元素每一面的价值）

参见 JSFIDDLE

fancybox的填充值无法按预期工作

1 个答案: