はじめに
Lightbox を利用するととても手軽にスライドショー機能を導入することができます。
Rails アプリにも簡単に組み込むことができますが、少しだけ注意が必要なため、まとめました。
導入方法
-
公式より取得したソースコード一式を
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);