Rails4 で Lightbox2 を使う

はじめに
=====

[Lightbox](http://lokeshdhakar.com/projects/lightbox2/) を利用するととても手軽にスライドショー機能を導入することができます。

Rails アプリにも簡単に組み込むことができますが、少しだけ注意が必要なため、まとめました。

導入方法
=====

1. 公式より取得したソースコード一式を `vendor/assets` 配下に配置する

    `lightbox.css` は `lightbox.css.scss` に rename しておきましょう。

     ```
vendor
    └── assets
        ├── javascripts
        ├── lightbox
        │   ├── css
        │   │   ├── lightbox.css.scss
        │   │   └── screen.css
        │   ├── img
        │   │   ├── close.png
        │   │   ├── loading.gif
        │   │   ├── next.png
        │   │   └── prev.png
        │   └── js
        │       ├── lightbox.js
        │       └── lightbox.min.map
        └── stylesheets
```

2. `application.js` `application.css` に lightbox の js と css を追加する

    ```app/assets/javascripts/application.js
//= require js/lightbox
```

    ```app/assets/stylesheets/application.css.scss
 *= require css/lightbox
```

3. `css/lightbox.css` 内にて画像を参照しているパスを書き換える

    asset pipeline を利用した際に、正しく画像を適用するために必要です。
    CSS 内の `url` を `image-url` に変更してあげましょう。こうすることで asset pipeline によって js や css ファイルが 1 ファイルに統合＆圧縮された際にも正しく画像を参照してくれます。development 環境では（おそらく）対応しなくても問題ありませんが、test や production 環境に移行する際には必要となります。

```diff:app/vendor/assets/lightbox/css/lightbox.css.scss
diff --git a/vendor/assets/lightbox/css/lightbox.css.scss b/vendor/assets/lightbox/css/lightbox.css.scss
index 60cf695..1394a7b 100644
--- a/vendor/assets/lightbox/css/lightbox.css.scss
+++ b/vendor/assets/lightbox/css/lightbox.css.scss
@@ -1,6 +1,6 @@
 /* Preload images */
 body:after {
-  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
+  content: image-url("img/close.png") image-url("img/loading.gif") image-url("img/prev.png") image-url("img/next.png");
   display: none;
 }
 
@@ -79,7 +79,7 @@ body:after {
   width: 32px;
   height: 32px;
   margin: 0 auto;
-  background: url(../img/loading.gif) no-repeat;
+  background: image-url("img/loading.gif") no-repeat;
 }
 
 .lb-nav {
@@ -110,7 +110,7 @@ body:after {
   width: 34%;
   left: 0;
   float: left;
-  background: url(../img/prev.png) left 48% no-repeat;
+  background: image-url("img/prev.png") left 48% no-repeat;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   -webkit-transition: opacity 0.6s;
@@ -128,7 +128,7 @@ body:after {
   width: 64%;
   right: 0;
   float: right;
-  background: url(../img/next.png) right 48% no-repeat;
+  background: image-url("img/next.png") right 48% no-repeat;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   -webkit-transition: opacity 0.6s;
@@ -192,7 +192,7 @@ body:after {
   float: right;
   width: 30px;
   height: 30px;
-  background: url(../img/close.png) top right no-repeat;
+  background: image-url("img/close.png") top right no-repeat;
   text-align: right;
   outline: none;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
```

参考
=====

- [rails3 cssで画像urlをassets以下パスに指定 | このコードわからん](http://hai3.net/blog/2012/07/19/css-assets-path/)
- [Rails で Lightbox2 の使い方 | EasyRamble](http://easyramble.com/lightbox2-with-rails.html)
- [Lightbox](http://lokeshdhakar.com/projects/lightbox2/)