lightbox 2.0 を rails で使う
今回、Rails のバージョンは 2.0 です。
lightbox について説明するのは面倒なので、公式サイトを見てください。
サンプルをちょこちょこいじれば、理解できると思います。
lightbox 公式サイト
で、これを Rails に組み込むときの手順について。
1.DL したファイルを配置する。
index.html と、いくつかのフォルダができると思います。
それらを、以下のように配置していきます。
index.html => 削除(ぉ
js フォルダ => lightbox.js 及び scriptaculous.js を public/javascripts 以下にコピー。
images フォルダ => 最低限、closelabel.gif と loading.gif を public/images 以下にコピー(使うなら他も、分からなければ全部)。
css フォルダ => 中身を適当な css にコピペするか、public/stylesheets 以下にコピー(混ざるので、後者がおすすめ)。
2.ファイルを読み込む
当たり前ですが、読み込まないと読まれないので。
先ほど追加した js や css に、適切にリンクを張りましょう。
3.lightbox.js を少し書き換える
65, 66 行目の images/ を『/』images/ に書き換え。
要は、スラッシュの追加です。
これにより、ディレクトリがどこだろうと public/images/ 以下のファイルを読んでくれます。
4.テスト
<a href="/images/test.jpg" rel="lightbox"><img src="/images/thumb.jpg"></a>
これで、正常に動くはずです(FireFox 2.0 及び IE7 で確認)。
1.X 系と比べて、かなり使いやすくなったと思います。
前に仕事で使った時は、(私は見てただけですが)色々めんどくさそうだったので。
後、JavaScript が無効な環境でも、単純にリンクとして機能する点も個人的にうれしいところです。
lightbox について説明するのは面倒なので、公式サイトを見てください。
サンプルをちょこちょこいじれば、理解できると思います。
lightbox 公式サイト
で、これを Rails に組み込むときの手順について。
1.DL したファイルを配置する。
index.html と、いくつかのフォルダができると思います。
それらを、以下のように配置していきます。
index.html => 削除(ぉ
js フォルダ => lightbox.js 及び scriptaculous.js を public/javascripts 以下にコピー。
images フォルダ => 最低限、closelabel.gif と loading.gif を public/images 以下にコピー(使うなら他も、分からなければ全部)。
css フォルダ => 中身を適当な css にコピペするか、public/stylesheets 以下にコピー(混ざるので、後者がおすすめ)。
2.ファイルを読み込む
当たり前ですが、読み込まないと読まれないので。
先ほど追加した js や css に、適切にリンクを張りましょう。
3.lightbox.js を少し書き換える
65, 66 行目の images/ を『/』images/ に書き換え。
要は、スラッシュの追加です。
これにより、ディレクトリがどこだろうと public/images/ 以下のファイルを読んでくれます。
4.テスト
<a href="/images/test.jpg" rel="lightbox"><img src="/images/thumb.jpg"></a>
これで、正常に動くはずです(FireFox 2.0 及び IE7 で確認)。
1.X 系と比べて、かなり使いやすくなったと思います。
前に仕事で使った時は、(私は見てただけですが)色々めんどくさそうだったので。
後、JavaScript が無効な環境でも、単純にリンクとして機能する点も個人的にうれしいところです。