Lightboxのローディング画像をCSSに差し替える
Lightbox で画像を読み込んでいるときに表示される、あの「くるくる」をCSSアニメーションに置き換える手順のメモです。
CSSとHTMLの準備
CSSのローディングアニメーションはCSS Load.netなどを使って簡単に作成できます。 Widthは100px以内に収めた方が良いでしょう。出力されるコードは以下の様なものです。
#movingBallG{&lf; position:relative;&lf; width:80px;&lf; height:7px;&lf;}&lf;.movingBallLineG{&lf; position:absolute;&lf; left:0px;&lf; top:3px;&lf; height:1px;&lf; width:80px;&lf; background-color:#ccc;&lf;}&lf;.movingBallG{&lf; background-color:#6af;&lf; position:absolute;&lf; top:0;&lf; left:0;&lf; width:7px;&lf; height:7px;&lf; -moz-border-radius:4px;&lf; -moz-animation-name:bounce_movingBallG;&lf; -moz-animation-duration:1s;&lf; -moz-animation-iteration-count:infinite;&lf; -moz-animation-direction:linear;&lf; -webkit-border-radius:4px;&lf; -webkit-animation-name:bounce_movingBallG;&lf; -webkit-animation-duration:1s;&lf; -webkit-animation-iteration-count:infinite;&lf; -webkit-animation-direction:linear;&lf; -ms-border-radius:4px;&lf; -ms-animation-name:bounce_movingBallG;&lf; -ms-animation-duration:1s;&lf; -ms-animation-iteration-count:infinite;&lf; -ms-animation-direction:linear;&lf; -o-border-radius:4px;&lf; -o-animation-name:bounce_movingBallG;&lf; -o-animation-duration:1s;&lf; -o-animation-iteration-count:infinite;&lf; -o-animation-direction:linear;&lf; border-radius:4px;&lf; animation-name:bounce_movingBallG;&lf; animation-duration:1s;&lf; animation-iteration-count:infinite;&lf; animation-direction:linear;&lf;}&lf;@-moz-keyframes bounce_movingBallG{&lf; 0%{ left:0px; }&lf; 50%{ left:74px; }&lf; 100%{ left:0px; }&lf;}&lf;@-webkit-keyframes bounce_movingBallG{&lf; 0%{ left:0px;}&lf; 50%{ left:74px;}&lf; 100%{ left:0px; }&lf;}&lf;@-ms-keyframes bounce_movingBallG{&lf; 0%{ left:0px; }&lf; 50%{ left:74px; }&lf; 100%{ left:0px; }&lf;}&lf;@-o-keyframes bounce_movingBallG{&lf; 0%{ left:0px; }&lf; 50%{ left:74px; }&lf; 100%{ left:0px; }&lf;}&lf;@keyframes bounce_movingBallG{&lf; 0%{ left:0px; }&lf; 50%{ left:74px; }&lf; 100%{ left:0px; }&lf;}&lf;
<div id="movingBallG">&lf; <div class="movingBallLineG"></div>&lf; <div id="movingBallG_1" class="movingBallG"></div>&lf;</div>&lf;
CSSの設置
CSSは何処に置いても問題ありません。
サイト共通のスタイルシートや、lightbox.cssに追記しても良いでしょう。
僕はmovingball.cssにまとめておき、
サイト共通のstyle.cssから@importで読み込ませています。
lightbox.jsの修正
GIF画像の部分をHTMLに差し替えるにはLightboxのjsを弄る必要があります。 Lightboxには圧縮済みのlightbox-2.6.min.jsが同梱されていますが、 これだと編集が困難なので、圧縮前のjsをGitHubから入手します。
lightbox.jsの60行目付近Lightbox.prototype.buildの2行下、ひときわ長い行を弄ります。
Lightbox.prototype.build = function() {&lf; var _this = this;&lf; $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));&lf; this.$lightbox = $('#lightbox');&lf; this.$overlay = $('#lightboxOverlay');&lf;
行中にある<a class='lb-cancel'></a>を探して、
このaタグの中に先程のHTMLを
1行にして・ダブルクォーテーションをシングルクォーテーションに置き換えて
挿入します。
Lightbox.prototype.build = function() {&lf; var _this = this;&lf; $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><div id='movingBallG'><div class='movingBallLineG'></div><div id='movingBallG_1' class='movingBallG'></div></div></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));&lf; this.$lightbox = $('#lightbox');&lf; this.$overlay = $('#lightboxOverlay');&lf;
修正したlightbox.jsはそのままでも動きますが、転送量を減らしたい場合は Javascript Compressorなどを使って圧縮します。
lightbox.cssの修正
最後にlightbox.cssを修正します。
3行目のurl(../img/loading.gif)を削除します。
body:after {&lf; content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);&lf; display: none;&lf;}&lf;
83行目付近を書き換えます。
.lb-cancel {&lf; display: block;&lf; width: 80px; // CSSアニメーションのWidthに合わせる&lf; height: 7px; // CSSアニメーションのHeightに合わせる&lf; margin: 0 auto;&lf; background: url(../img/loading.gif) no-repeat; // 削除&lf;}&lf;
ここまでの作業が終わったらブラウザで確認してみましょう。