はじめに
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 -
application.jsapplication.cssに lightbox の js と css を追加するapp/assets/javascripts/application.js//= require js/lightboxapp/assets/stylesheets/application.css.scss*= require css/lightbox -
css/lightbox.css内にて画像を参照しているパスを書き換えるasset pipeline を利用した際に、正しく画像を適用するために必要です。
CSS 内のurlをimage-urlに変更してあげましょう。こうすることで asset pipeline によって js や css ファイルが 1 ファイルに統合＆圧縮された際にも正しく画像を参照してくれます。development 環境では（おそらく）対応しなくても問題ありませんが、test や production 環境に移行する際には必要となります。
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);