Question

我有一个我打开的iframes的fancybox版本2.1.4库，然后在显示描述的父体（fb iframe外部）中插入一个右列。为了正确调整iframe的大小，我在初始化fancybox时在选项中传入了margin：[120,340,40,40]。到现在为止还挺好。右列是固定的，fancybox可以在分配给它的空间中很好地调整大小。

但是，现在我希望用户能够折叠右列并将fancybox iframe扩展到整页。将右列折叠到40px宽是很容易的。但是，我不能为我的生活弄清楚如何将开放的fancybox画廊的右边距从340更改为60. api中没有任何内容，而且我找不到任何SO或谷歌，并通过阅读源代码也没有帮助。希望有一些简单的东西，我只是缺少，但我可以使用一些帮助。

作为临时修复，我将当前对象传递给右列加载器并直接修改边距，然后检查右列是否在afterload回调中折叠。丑陋但功能性。当然有更好的方法。 $ .fancybox.options（{newKey：newValue}）的api会很不错。

这是选项代码和加载右列的函数：

ssTabs.fancyboxOptions = {
        scrollOutside: true,
        openEffect  : 'none',
        closeEffect : 'none',
        arrows: false, 
        closeBtn: false, 
        //using live prevents multiple event handlers when adding content or switching views
        live: false,
        beforeLoad: function(){
            $('.notes_html').css('position', 'relative').css('top', '0').css('left', '0');
        },
         afterLoad: function(current, next) {
            var marginsOpen = [80, 340, 20, 20];
            var marginsCollapsed = [80, 60, 20, 20];
            var marginsPhone = [60, 0, 0, 0];
            var margins = marginsOpen;
            if ($('body').hasClass('fb_rc_collapsed')) {
                margins = marginsCollapsed;
            }
            if ($('body').hasClass('mobile')) {
                console.log('setting fb margins to mobile');
                margins = marginsPhone;
            }
            ssTabs.addFbMenuBar(current);
            console.log('current: ', current);
            if(current.type === "inline" || current.type === "iframe") {
                current.minHeight = "100%";
                current.minWidth = "100%";
            }
            if(current.type === "iframe") {
                this.margin = margins;
                //current.maxWidth = 1200;
            }
        },
        beforeClose: function(){
          $('.notes_html').css('position', 'absolute').css('top', '-9999px').css('left', '-9999px');  
        },
        afterClose: function(){
            ssTabs.removeFbMenuBar();
        },
        iframe: {
            preload: false
        },
        padding: 5,
        margin : [120, 340, 40, 40],
        mouseWheel: false,
        helpers:  {
            title: null,
            overlay : {
                closeClick : false
            }
        }
};

ssTabs.addFbMenuBar = function(current) {
    zim.currentFbElement = current;
    var thisElement = current.element[0].dataset;
    var options = {};
    options.mySphere = zim.mySphere || false;
    options.sphereOwner = zim.thisSphereOwner;
    var contentArray = {content: zim.objectDictionary[thisElement.id]};
    var context = $.extend({}, contentArray, options);
    console.log('fb context: ', context);
    var template = 'fb_overlay';
    var location = '#gallery_right_column';
    console.log('inserting fb_menu_bar'); 
    $(location).handlebars(template, context, {}, checkForMobile);
    function checkForMobile() {
        if ($('body').hasClass('mobile')) {
            $('.fb_rcolumn').hide();
        }
    }
};

初始化库后修改fancybox选项（边距）

0 个答案: