我知道您可以将信息传递给fancybox功能,因此可以自定义某些设置,其中一个设置为按钮助手的顶部或底部。我也知道你可以通过改变CSS文件来改变按钮的确切位置。但是,有没有办法让按钮自动调整到图片的高度,以便它始终在图片的正上方。
答案 0 :(得分: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
克劳斯
答案 1 :(得分:0)
您可以在#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;
}
当这些箭头发生变化时,它们与关闭按钮的高度相同。这是你在哪里寻找的?