私にはこのブログを書く権限がない。

Twitterじゃ書ききれない何かを書くアレ

Rails3.2でLightbox2を使う方法

RailsLightbox2を使うにはちょっとLightbox2のソースコードを書き換える必要があったのでメモ

1. 普通に公式サイトからLightbox2をダウンロード
2. ファイルをコピーする時の場所がかなり重要になってくる。
js/lightbox.js -> {app_root}/app/assets/javascripts/lightbox.js
jQueryを使ってなかったら)js/jquery-1.7.2.min.js -> {app_root}/app/assets/javascripts/jquery-1.7.2.min.js
css/lightbox.css -> {app_root}/app/assets/stylesheets/lightbox.css
images/{next.png, prev.png, loading.gif, close.png} -> {app_root}/app/assets/images/{next.png, prev.png, loading.gif, close.png}
3. コピーしたlightbox.jsを編集。
images/loading.gif
images/close.png
となっているところを、それぞれ
assets/loading.gif
assets/close.png
に変更。こことは全く違う書き換え方なので注意(Rails2とRails3の違い)
4. あとはLightbox2を使いたいviewsでjavascript_include_tagやstylesheet_link_tagを使ってそれっぽく書けば終わり。



2013/01/27追記
表示する画像が単体のときはこの方法でいいのですが、複数の画像で端っこをクリックすると次の画像に遷移する機能を使う時はこの方法だけではダメなことが発覚。
対策としては上記の方法に加えて、lightbox.cssを編集する必要があり
../images/prev.png
../assets/next.png
をそれぞれ
../assets/prev/prev.png
../assets/prev/next.png
にする必要がある。これを行わないと次の画像に遷移することはできるが、矢印が表示されないためユーザは次の画像に遷移させる方法がわからない。