]> Lightboxのローディング画像をCSSに差し替える | FullAstern!

Notes

メモ書き

Lightboxのローディング画像をCSSに差し替える

Lightboxは言わずと知れた、 元のHTMLにちょちょいと手を加えるだけでWebページの画像をオシャンティに表示してくれるjQueryプラグインです。

loading.gif
付属のloading.gif

れどめ通りに設置しても結構な見栄えになりますが、画像を読み込んでいるときに 表示されるローディング画像が個人的にちょっとダサいかな?と感じたので 適当に差し替えた時の手順をメモっておきます。

元々はGIF画像なので、その辺の素材集からお気に入りのローディング画像を拾ってきて 差し替えても良いのですが、GIFはやや時代遅れ(?)なので今回はCSSアニメーションを使ったものにします。

CSSとHTMLの準備

CSSのローディングアニメーションはCSS Load.netなどを使って簡単に作成できます。 Widthは100px以内に収めた方が良いでしょう。出力されるコードは以下の様なものです。

CSS
#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;
HTML
<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;
lightbox.js 変更前 (一部抜粋)

行中にある<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 変更後 (一部抜粋)

修正した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;
lightbox.css (一部抜粋)

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;
lightbox.css (一部抜粋)

ここまでの作業が終わったらブラウザで確認してみましょう。 上手くいけば、画像の読み込み中に右の様なアニメーションが表示されます。

© FullAstern!