这对我来说是一个巨大的难题。我会全面解释。
我通常只是像这样点击fancyapps fancybox插件......
$("a.gallery-thumb").fancybox({
afterLoad : function() {
/* shtuff */
}
});
但是,当点击a.gallery-thumb
时,我需要传递一个不相同的变量。这个独特的变量是使用这个...生成的。
FB.Canvas.getPageInfo(function(info) {
var scrollPosition = info.scrollTop;
};
此scrollPosition
唯一变量是单击a.gallery-thumb
时的当前滚动位置。
所以我需要将scrollPosition
变量传递到下面的fancybox函数中。
$("a.gallery-thumb").fancybox({
afterLoad : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
}
});
现在你可能在想为什么我不这样做......
$("a.gallery-thumb").fancybox({
afterLoad : function() {
FB.Canvas.getPageInfo(function(info) {
var scrollPosition = info.scrollTop;
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
};
}
afterShow : function() { },
onUpdate : function() { }
});
好的 - 这很好用,但我需要其他fancybox回调中的scrollPosition
变量,例如afterShow
和onUpdate
。但我确定我可以重复FB.Canvas.getPageInfo
函数......不完全是,我需要从画廊初始点击开始时生成的原始值。
所以也许我必须做这样的事情,但我似乎无法让它发挥作用,关于如何让下面的脚本工作的任何想法?
$("a.gallery-thumb").on('click', function (){
event.preventDefault(); /* I'm trying to stop the image opening by default before my fancybox function runs */
FB.Canvas.getPageInfo(function(info) {
var scrollPosition = info.scrollTop;
$(this).attr('rel','fancybox-thumb').fancybox({
onUpdate : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
},
afterLoad : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
},
afterShow : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
},
onUpdate : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
}
});
});
});
请参阅js fiddle here仿效我的fancybox函数未触发的问题......
[http://jsfiddle.net/svsdx/1631/][1]
答案 0 :(得分:1)
为什么不将变量声明向上移动一个级别,以便它在整个函数的范围内?像:
var scrollPosition = 0;
$("a.gallery-thumb").on('click', function (event){
event.preventDefault(); /* I'm trying to stop the image opening by default before my fancybox function runs */
FB.Canvas.getPageInfo(function(info) {
scrollPosition = info.scrollTop;
});
return false;
}).each(function(){
$(this).attr('rel','fancybox-thumb').fancybox({
onUpdate : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
},
afterLoad : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
},
afterShow : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
},
onUpdate : function() {
$('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
}
});
});