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

• 追加された行はこの色です。
• 削除された行はこの色です。
• Poem/Lightbox のローディング画像を CSS に差し替える へ行く。
• Poem/Lightbox のローディング画像を CSS に差し替える の差分を削除

#author("2023-06-05T18:14:52+00:00","default:mogamin","mogamin")
* Lightbox のローディング画像を CSS に差し替える [#kfa5763b]

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

** CSS と HTML の準備 [#o266603e]

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

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

** lightbox.js の修正 [#he3e346d]

圧縮前の js を [[lokesh/lightbox2>https://github.com/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>https://javascriptcompressor.com/]] などを使って圧縮。

** lightbox.css の修正 [#z0483c16]

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;  // 削除
 }

以上。