jQuery插件和Rails资产管道

时间:2011-11-03 23:06:29

标签: jquery ruby-on-rails jquery-plugins ruby-on-rails-3.1 asset-pipeline

我正在使用一个名为Fancy Gallery的jQuery插件,它经常调用插件文件夹中的images文件夹中的图像,如background:url("../images/fancygallery/arrows_sprite.png")。我的问题有2个部分

  1. 这个插件应该如何与我的rails 3.1应用程序集成?该文件夹应该放在vendors / assets文件夹中吗?该插件有3个文件夹,css,images,js。如果我将这些内容放在vendor/assets/stylesheetsvendor/assets/imagesvendor/assets/javascripts中,则css肯定无法在../images文件夹中找到图像,因为资产管道传输后它将不再存在完成它。那么它应该放在哪里呢?

  2. 有没有一种简单的方法可以让我不必进入我的插件并在加载图像的任何地方编辑css?我不想每次更新插件时都这样做,必须有一种方法可以直接删除插件文件夹并让它工作。

  3. 进一步测试

    这是我正在运行的问题。例如,在CSS中,这是加载箭头background: url('../images/fancygallery/arrows_sprite.png')的部分。在整个插件中,所有图像都使用../images来引用。因此,当页面加载时加载插件时,这就是它查找图像http://localhost:3000/images/fancygallery/arrows_sprite.png的方式,但图像不存在,它存在于assets/fancygallery/images文件夹中。我有什么方法可以在../images而不是http://localhost:3000/assets/fancygallery/images/中查看http://localhost:3000/images/?或者其他一些解决方法,不需要我更改插件代码,以便我以后可以轻松更新。

    部分问题是

    插件css正在我的application.css.SCSS文件中加载

    @import "fancygallery/css/uniform.aristo";
    @import "fancygallery/css/jquery.fancygallery";
    @import "fancygallery/css/prettyPhoto";
    

    因此所有图像都与此相关。

1 个答案:

答案 0 :(得分:1)

我能够通过添加fancygallery-plugin文件夹然后删除fancygallery文件夹来解决此问题。在asset:precompile之后,资产文件夹中的fancygallery文件夹可用。然后我直接调用css和js文件,而不是从application.css.scss文件中调用,如下所示:

<%= stylesheet_link_tag    "fancygallery/css/uniform.agent.css" %>
<%= stylesheet_link_tag    "fancygallery/css/jquery.fancygallery.css" %>
<%= stylesheet_link_tag    "fancygallery/css/prettyPhoto.css" %>
<%= javascript_include_tag "fancygallery/js/jquery.uniform.min.js" %>
<%= javascript_include_tag "fancygallery/js/jquery.fancygallery.min.js" %>
<%= javascript_include_tag "fancygallery/js/jquery.prettyPhoto.js" %>

这使得图像引用恰好适用于插件开发人员的预期,并且它们可以很好地加载。