【Rails】RailsでColorboxを使ってみた

Colorboxはモーダルを開いて画像を拡大表示したりすることができるjQueryのPluginです。
今回はColorbox用のgemを使わずに導入してみたいと思います。

1. 以下のページからcolorbox本体をダウンロードしてきます。

http://www.jacklmoore.com/colorbox/

2. 必要なファイルをRailsプロジェクトに配置します。(今回はexample1を使います)

$ cd Railsプロジェクト
$ cp ~/Downloads/colorbox-master/jquery.colorbox.js ./vendor/assets/javascripts
$ cp ~/Downloads/colorbox-master/example1/colorbox.css ./vendor/assets/stylesheets
$ mkdir -p ./vendor/assets/images/colorbox
$ cp -R ~/Downloads/colorbox-master/example1/images/* ./vendor/assets/images/colorbox

3. CSSのイメージパスを変更します。

url(images...となっているところをurl(colorbox...に置換します。

4. Colorboxを読み込むように設定します。

// app/assets/javascripts/application.js

...
//= require jquery.colorbox.js
//= require common
...

/* app/assets/stylesheets/application.css */

...
 *= require colorbox
...

# app/assets/javascripts/common.js.coffee

$ ->
  $('a.colorbox').colorbox()

5. 呼び出してみる

# app/views/layouts/application.html.erb

<%= link_to 'colorbox', root_path, class: 'colorbox' %>

モーダルで表示できました。