22
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails4 で Lightbox2 を使う

Last updated at Posted at 2014-07-29

はじめに

Lightbox を利用するととても手軽にスライドショー機能を導入することができます。

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

導入方法

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

    lightbox.csslightbox.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 内の urlimage-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);

参考

22
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?