Question

我知道您可以将信息传递给fancybox功能，因此可以自定义某些设置，其中一个设置为按钮助手的顶部或底部。我也知道你可以通过改变CSS文件来改变按钮的确切位置。但是，有没有办法让按钮自动调整到图片的高度，以便它始终在图片的正上方。

Answer 1

我正在为我解决这个问题，还有一个小帮手。

$('a.lightbox').fancybox({
    closeBtn: false,
    helpers: {
        title: {type: 'float'},
        buttons: {
            skipSingle: true
        },
        custom: {}
    }
});

$.fancybox.helpers.custom = {
    defaults: {
        position: 'top',
        space: 0
    },
    onUpdate: function(opts, obj) {
        this.setPosition(opts, obj);
    },
    afterShow: function(opts, obj) {
        this.setPosition(opts, obj);
    },
    setPosition: function(opts, obj) {
        // default position
        var top = '20';
        var offset = $('.fancybox-wrap').offset();
        if (opts.position === 'top') {
            top = (offset.top - ($('#fancybox-buttons').height() + opts.space));
        } else if (opts.position === 'bottom') {
            top = (offset.top + $('.fancybox-wrap').height() + opts.space);
        }
        $('#fancybox-buttons').css({top: top + 'px', position: 'absolute'});
    }
};

可以设置控件的位置（顶部/底部）和空格。

因为我在移动设备上的position（）函数和css位置'fixed'遇到麻烦，我正在使用offset（）函数并将css位置设置为'absolute'

HTH

克劳斯

Answer 2

您可以在＃fancybox-left-ico，＃fancybox-right-ico {top：50％;}中编辑此“top”，或将其更改为{top：-20px;}或者/ js中您喜欢的内容第153行的/fancybox-1.3.4/jquery.fancybox-1.3.4.css看起来像这样：

#fancybox-left-ico, #fancybox-right-ico {
    cursor: pointer;
    display: block;
    height: 30px;
    left: -9999px;
    margin-top: -15px;
    position: absolute;
    top: 50%;                   /* this line is what you want to change */
    width: 30px;
    z-index: 1102;
}

为老年人编辑

您可以在以下文件中进行编辑：http://www.thomasantonini.webuda.com/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5

首先在第8行：这将使用播放器选项

来调整fancybox按钮

#fancybox-buttons.top {
    top: 0;
}

第146行的下一次更改：这会更改点击右侧（下一个）箭头

.fancybox-next span {
    background-position: 0 -72px;
    right: 0;
    top: -15px;
}

并在第141行：更改前箭头

.fancybox-prev span {
    background-position: 0 -36px;
    left: 10px;
    top: -15px;
}

当这些箭头发生变化时，它们与关闭按钮的高度相同。这是你在哪里寻找的？

Jquery Fancybox 2按钮帮手位置

2 个答案:

为老年人编辑