尝试弄清楚当使用无限滚动加载新内容时如何重新初始化Easy FancyBox。我试过了$.fancybox.init()
,但这似乎还不够。在head部分中,调用easy fancybox的脚本是:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery');
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'titleFromAlt' : true }) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
});
/* ]]> */
任何想法如何重新初始化这样的东西,专门绑定到#content div.post中加载的新内容?谢谢你的帮助。
答案 0 :(得分:0)
检查this thread,它可能会有所帮助(EasyFancybox使用fancybox v1.3.4)
更新:我刚刚回忆一下,参考线程(上图)适用于单个新添加的元素,但不适用于图库。如果你有一组画廊(使用rel
属性),那么你可能更愿意升级到jQuery 1.7+(如果还没有)并使用jQuery on()
代替delegate()
,这将允许您可以初始化现有的和动态添加的元素。
我制作了一个示例页面here,展示如何使用jQuery on()
来解决动态添加元素和fancybox(v1.3.x)的问题,如果你想看一下。< / p>
根据示例页面,我想在您的具体情况下,您可以尝试以这种方式调整代码:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
$("#content div.post").on("focusin", function(){
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr({'rel': 'gallery', 'tabindex': '1'});
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, {
'transitionIn' : 'elastic',
'easingIn' : 'easeOutBack',
'transitionOut' : 'elastic',
'easingOut' : 'easeInBack',
'opacity' : false,
'titleShow' : true,
'titlePosition' : 'over',
'titleFromAlt' : true
}) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
}); // on
}); // ready
当然,需要jQuery 1.7+。