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

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

Lightbox で画像を読み込んでいるときに表示される、あの「くるくる」が微妙なので CSS アニメーションに置き換える手順のメモ。

CSS と HTML の準備†

CSS のローディングアニメーションは CSS Load.net で作成できる。Width は 80px 程度でよさそう。

CSS は loading.css に保存し、`<link />` とか `@import` で読み込ませるようにする。
HTML は以下で lightbox.js に挿入する。

lightbox.js の修正†

圧縮前の js を lokesh/lightbox2 から入手。

lightbox.js の `Lightbox.prototype.build` の下あたりの ひときわ長い行を編集する。
行中にある `<a class='lb-cancel'></a>` を探して、この中に作成した HTMLを 1行にして・ダブルクォーテーションをシングルクォーテーションに置き換えて 挿入する。

Lightbox.prototype.build = function() {
  var _this = this;
  $("<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'));
  this.$lightbox = $('#lightbox');
  this.$overlay = $('#lightboxOverlay');

修正した lightbox.js は Javascript Compressor などを使って圧縮。

lightbox.css の修正†

3行目の `body:after` 内の `url(../img/loading.gif)` を削除。

83行目付近を書き換える。

.lb-cancel {
  display: block;
  width: 80px;  // CSSアニメーションのWidthに合わせる
  height: 7px;  // CSSアニメーションのHeightに合わせる
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;  // 削除
}

以上。

Menu

Logbook
command snippet
command snippet/windows
Mastodon
さくらのVPS

最新の20件

edit