如何更改Fancybox预加载器图像？

我想用另一个预加载器替换默认的Fancybox1.3.4图像预加载器（fancy_loading.png）。如何更改Fancybox预加载器图像？

Fancybox preloader不仅在css中编码，而且在javascript本身编码。似乎有在javascript两个地方，至少：

 _animate_loading = function() { 
     if (!loading.is(':visible')){ 
      clearInterval(loadingTimer); 
      return; 
     } 

     $('div', loading).css('top', (loadingFrame * -40) + 'px'); 

     loadingFrame = (loadingFrame + 1) % 12; 
    };

和

$.fancybox.showActivity = function() { 
    clearInterval(loadingTimer); 

    loading.show(); 
    loadingTimer = setInterval(_animate_loading, 66); 
}; 

$.fancybox.hideActivity = function() { 
    loading.hide(); 
};

所以自定义预加载器将需要修改的JavaScript了。如何更改fancybox-1.3.4 javascript以设置自定义预加载器图像？

来源

2012-02-20 Lexx Luxx

CSS声明是在这里：

#fancybox-loading div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 40px; 
    height: 480px; 
    background-image: url('fancybox.png'); 
}

他们正在使用的背景图像的精灵和改变背景位置动画吧。如果你打算使用loading.gif图片，那么你不需要为它制作动画。

您需要更改background-image路径，height和width迎合您的新形象。您可能想要将动画的JS代码注释掉，以免发生冲突。

的loading div正在这里声明：

$('body').append(
    tmp = $('<div id="fancybox-tmp"></div>'), 
    loading = $('<div id="fancybox-loading"><div></div></div>'), 
    overlay = $('<div id="fancybox-overlay"></div>'), 
    wrap = $('<div id="fancybox-wrap"></div>') 
);

您可以在loading变量捎带或者干脆改变#fancybox-loading造型。然后您需要删除对loadingTimer和loadingFrame的任何引用。注释掉这整个函数：

/*_animate_loading = function() { 
    if (!loading.is(':visible')){ 
    clearInterval(loadingTimer); 
    return; 
    } 

    $('div', loading).css('top', (loadingFrame * -40) + 'px'); 

    loadingFrame = (loadingFrame + 1) % 12; 
};*/

修改以下功能：

$.fancybox.showActivity = function() { 
    //clearInterval(loadingTimer); 

    loading.show(); 
    //loadingTimer = setInterval(_animate_loading, 66); 
};

应该这样做。您不希望loading上有任何setInterval，因为您不会为其设置动画效果，但您希望它有条件地隐藏/显示。

来源

2012-02-20 20:38:01

是的，我想设置新的预加载使用动画loader.gif。上面的JavaScript是唯一必须在fancybox JS中取消注释的地方吗？在指定的声明之前也有CSS：'＃fancybox-loading { } \t position：fixed; \t top：50％; \t left：50％; \t width：40px; \t height：40px; \t margin-top：-20px; \t margin-left：-20px; \t光标：指针; \t溢出：隐藏; \t z-index：1104; \t display：none; }'应该调整宽度和高度吗？此外，'margin-top'＆'margin-left'：这些设置用于什么？ – 2012-02-20 21:17:06

不适合我。似乎需要更多的JS文件的修改。 – 2012-02-20 23:01:59

看起来好像我太快拉动扳机。是的，还有一个容器'div'需要修改。我将在一些JS中看看还有哪些需要注释/编辑。 – 2012-02-21 14:42:10

有两种选择 -

1）升级到v2，因为它是现在使用gif动画

2）更换showActivity和hideActivity方法与你的，例如，包括js文件后 -

$.fancybox.showActivity = function() { 
    /* Add your animated gif to page ... */ 
}

来源

2012-02-21 08:32:07 Janis

我preffer第二个选项，调整v1.3.4这是正确的mods：'$ .fancybox.showActivity = function（）{ \t \t F.hideActivity（）; $（'

'）.click（F.cancel）.appendTo（'body'）; }， $ .fancybox.hideActivity = function（）{ $（“＃fancybox-loading”）。remove（）; }，' – 2012-02-21 12:42:11

是的，类似的东西。替换“F.hideActivity（）;”与“$ .fancybox.hideActivity”和“F.cancel”与适当的东西 – Janis 2012-02-21 13:53:00

一注意：我也应该从'加载= $（'

'）'，'加载= $（ '

'），'？（如果在fancybox v2中使用css容器div） – 2012-02-22 10:31:46

你不需要改变了这么多只是在js文件注释里的句子：

$.fancybox.showActivity = function() { 
    //clearInterval(loadingTimer); 

    loading.show(); 
    //loadingTimer = setInterval(_animate_loading, 66); 
};

这就是所有，它会工作，但要记住在正确的文件的变化，因为那里是jquery.fancybox-1.3.4.js和jquery.fancybox-1.3.4.pack.js

来源

2012-11-17 18:16:33 andys

如何更改Fancybox预加载器图像？

回答

相关问题