Galleria幻灯片在本地服务器上工作,而不是在实时服务器上



我正试图在我的rails应用程序中启动并运行Galleria幻灯片。它在本地服务器(Chrome和Firefox)上运行良好,但在实时服务器(Chrome或Firefox)上不起作用。在Chrome浏览器中,幻灯片在加载后会短暂闪烁(可能是.25秒?),然后消失。在Firefox中,它根本不会出现。当我看到Chrome上的inspect元素在网络选项卡下发生了什么时,它说galleria.classic.css由于404错误而被取消。

我的应用程序中有以下代码:

视图中:

<head><link rel="stylesheet" type="text/css" href="assets/libs/galleria/themes/classic/galleria.classic.css"></head>
<body>
  <div id="slideshow">
    <div id="galleria">
        <%= image_tag("pic1_url")%>
        <%= image_tag("pic2_url")%>
        <%= image_tag("pic3_url")%>
    </div>
    <script>
        $('#galleria').galleria();
    </script>
  </div>
</body> 

在我的application.css样式表中,我有:

 *= require_self
 *= require galleria/themes/classic/galleria.classic
 *= require_tree .
 */

在我的application.js文件中,我有:

//= require jquery
//= require jquery_ujs
//= require jquery_nested_form
//= require galleria/galleria-1.2.9.min
//= require galleria/themes/classic/galleria.classic
//= require_tree .

我尝试过的修复方法:

  • 仔细检查我的路径(根据这个答案:Galleria在所有浏览器中都可以本地工作,但在托管时只有IE8和Chrome)。它们都是前斜线而不是后斜线。

  • 在galleria.classic.js中,将css:galleria.chlassic.css更改为css:false(根据这个答案:galleria没有出现在Rails应用程序中的Heroku上)

  • 我在vendor/assets/libs/Galleria的rails资产管道中有我的Galleria(根据这个答案:在Rails3.1AssetPipeline中把Galleria放在哪里?)

  • 我在标题中的样式表链接中添加了type="text/css",(根据这里的第二个答案:Galleria在首次页面访问时未加载)

如何让Galleria上班?

当您将文件部署到生产环境时,它会编译并收集一个名为assets的文件夹中的所有资产,因此指定的路径不起作用,因为您正在使用的Heroku服务器或其他服务器上没有galleria/themes/classic/路径。

所以,如果需要的话,您需要在HTML文件中指定路径,比如href="assets/galleria.classic.css"

但事实上你的

*= require galleria/themes/classic/galleria.classic

//= require galleria/galleria-1.2.9.min
//= require galleria/themes/classic/galleria.classic

已经完成了,所有必要的代码都必须在编译的.css.js文件中。因此,您可以从代码中删除<link rel...>部分。

附言:我尽量避免cssjavascriptsimages文件夹中的子文件夹,因为它经常会导致像你这样的问题,而且它会使应用程序结构更加清晰。但要做到这一点,您需要检查插件文件,如果它们之间有任何指定的路径,并删除其中的任何/folder/subfolder/部分,只留下文件名。

最新更新