Rails で Lightbox2 の使い方

モーダルウィンドウでいい感じに画像を表示する jQuery ライブラリ、Lightbox2 を Rails で使ってみたので記録です。かなり簡単に使えます。

スポンサーリンク

— 環境 —
Rails 4.0.1
jquery-rails 3.0.4
Lightbox 2.6

vendor/assets に lightbox を設置

Lightbox2

Lightbox2 をダウンロード。lightbox ライブラリを1つのディレクトリ配下で一元管理するために、vendor/assets/lightbox に設置しました。

rails_root/
| vendor/
| | assets/
| | | lightbox/
| | | | css/
| | | | img/
| | | | js/

こんな感じ。以下のファイルは不要なので削除。

jquery は既に入ってるので、jquery-1.10.2.min.js は削除しましたけど、入れてなければそのままにしておきます。

application.js, application.css で lightbox ファイルを require

Asset Pipeline の対象に lightbox のファイルを含めるために、require します。

app/assets/javascripts/application.js

app/assets/stylesheets/application.css

vendor/assets/lightbox が Asset Pipeline のロードパスに追加されるので、そこからの相対パスでファイル名を指定します。また拡張子の .js, .css は省略する。

HTML のリンク要素で data-lightbox を指定

公式のガイドを参照すると以下の説明があります。

Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>

超要約すると、data-lightbox に画像1枚ずつユニークな値を指定してね。

Rails のビューでサムネイルにリンクして、クリックで大きい画像を表示する Lightbox 用のコードは次の通り。

thumbnail が最初に表示するサムネイル画像のパス/URL、large_img がその大きい画像のパス/URL。data-lightbox はハイフン付きなので、Ruby で直接シンボルにできないので一旦文字列にしてシンボル化。

以上で、サムネイル→クリック→拡大画像をモーダルウィンドウで表示、の実装が簡単にできあがりました。恐るべし jQuery プラグイン達の実力。昔、素の JavaScript で同じような処理を書いたことがありますが、それに比べると何十倍も簡単です。

【追記 2014/09/11】
production, staging 環境などで、asset pipline を有効にする場合は、さらに lightbox.css の編集が必要です。以下ページが大変分かりやすいので、ご参考にお願いします!
Rails4 で Lightbox2 を使う – Qiita
【追記ここまで】

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!