RailsでjQueryライブラリなどはどうやって使えばいいのかなということで、Colorboxを対象に試行錯誤してみました。
サードパーティ製ライブラリはvendorディレクトリで使うということなので、vendorディクレクトリのjavascripts / stylesheetsディレクトリにJSファイルとCSSファイルをそれぞれ入れます。
colorbox.cssを見てみると『images/overlay.png』というようなパスの指定があります。Railsで使う場合、『images/』の部分は不要なので全て除外します。
除外した結果です。
colorboxで使用される画像は『app/assets/images』ディレクトリに格納します。
colorboxで必要なJS処理は『app/assets/javascripts/custom.js』に記載しました。
viewはこんな感じです。
※表示する画像は外部から持ってきました。実際はimagesディレクトリに入れて使う感じだと思います。
これでリンククリック時にcolorboxをつかった画像表示がうまくいきました。
ひとまずこれで動くことを確認できたので、ファイル構成をもう少し綺麗にしていきたいと思います。vendorのJSとCSSファイルがフォルダ内にあっても大丈夫か確認してみました。
application.html.erbのJSとCSS読み込みのところに「/colorbox」を追加します。
Imagesに入れておいた画像も同じようにcoloboxディレクトリにまとめてあげます。
これでも動くかなと確認してみたところ問題なく読み込みできていました。
ここでちょっとびっくりしたのですが、cssをcolorboxディレクトリに入れたところ、画像ファイル参照パスに自動で「colorbox/」というのが追加されました。なのでCSS内の画像パスに「colorbox/」というのを追加する必要がありませんでした。
JSとCSSは同じフォルダ名にいれるとセットと判定してくれるのかな・・・
追記
ローカルで動いたので安心したのですが、Herokuに上げるとエラーがでました。CSSやJSが読み込めないエラーで何処が間違っているのかなと検索していたところ、Qiitaに解決方法が投稿されていました。
設定出来てなかったのがこの部分...
これでHeroku上でもCSSやJSの読み込みができるようになりました。
Rails & jQuery のサンプルコードです。github.com
