- 更新日: 2014年3月16日
- Rails
Rails で Lightbox2 の使い方
モーダルウィンドウでいい感じに画像を表示する jQuery ライブラリ、Lightbox2 を Rails で使ってみたので記録です。かなり簡単に使えます。
画像付き英語辞書 Imagict | 英単語をイメージで暗記— 環境 —
Rails 4.0.1
jquery-rails 3.0.4
Lightbox 2.6
vendor/assets に lightbox を設置
Lightbox2 をダウンロード。lightbox ライブラリを1つのディレクトリ配下で一元管理するために、vendor/assets/lightbox に設置しました。
| vendor/
| | assets/
| | | lightbox/
| | | | css/
| | | | img/
| | | | js/
こんな感じ。以下のファイルは不要なので削除。
|
1 2 3 4 5 6 |
lightbox/img/demopage/* lightbox/js/jquery-1.10.2.min.js lightbox/index.html lightbox/README.markdown |
jquery は既に入ってるので、jquery-1.10.2.min.js は削除しましたけど、入れてなければそのままにしておきます。
application.js, application.css で lightbox ファイルを require
Asset Pipeline の対象に lightbox のファイルを含めるために、require します。
app/assets/javascripts/application.js
|
1 |
//= require js/lightbox-2.6.min |
app/assets/stylesheets/application.css
|
1 |
*= require 'css/lightbox' |
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 用のコードは次の通り。
|
1 |
<%= link_to image_tag(thumbnail), large_img, :'data-lightbox' => image.id %> |
thumbnail が最初に表示するサムネイル画像のパス/URL、large_img がその大きい画像のパス/URL。data-lightbox はハイフン付きなので、Ruby で直接シンボルにできないので一旦文字列にしてシンボル化。
以上で、サムネイル→クリック→拡大画像をモーダルウィンドウで表示、の実装が簡単にできあがりました。恐るべし jQuery プラグイン達の実力。昔、素の JavaScript で同じような処理を書いたことがありますが、それに比べると何十倍も簡単です。
【追記 2014/09/11】
production, staging 環境などで、asset pipline を有効にする場合は、さらに lightbox.css の編集が必要です。以下ページが大変分かりやすいので、ご参考にお願いします！
Rails4 で Lightbox2 を使う – Qiita
【追記ここまで】
- Rails の関連記事
- RailsでMySQLパーティショニングのマイグレーション
- Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する
- RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方
- RailsでAMPに対応するgemをリリースしました
- Railsでrequest.urlとrequest.original_urlの違い
- Railsでwheneverによるcronバッチ処理
- Google AnalyticsのRails Turbolinks対応
- Railsアプリにソーシャル・シェアボタンを簡単設置
- Rails監視ツール用にErrbitをHerokuで運用
- Facebook APIバージョンのアップグレード手順(Rails OmniAuth)
Leave Your Message!