Rails
lightbox

Rails4 で Lightbox2 を使う

More than 3 years have passed since last update.


はじめに

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);



参考