Poem/Lightbox のローディング画像を CSS に差し替える
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
* Lightbox のローディング画像を CSS に差し替える [#kfa576...
Lightbox で画像を読み込んでいるときに表示される、あの「く...
** CSS と HTML の準備 [#o266603e]
CSS のローディングアニメーションは [[CSS Load.net>https:/...
CSS は loading.css に保存し、`<link />` とか `@import` で...
HTML は以下で lightbox.js に挿入する。
** lightbox.js の修正 [#he3e346d]
圧縮前の js を [[lokesh/lightbox2>https://github.com/loke...
lightbox.js の `Lightbox.prototype.build` の下あたりの ひ...
行中にある `<a class='lb-cancel'></a>` を探して、この中に...
Lightbox.prototype.build = function() {
var _this = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'><...
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
修正した lightbox.js は [[Javascript Compressor>https://j...
** 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; // 削除
}
以上。
終了行:
* Lightbox のローディング画像を CSS に差し替える [#kfa576...
Lightbox で画像を読み込んでいるときに表示される、あの「く...
** CSS と HTML の準備 [#o266603e]
CSS のローディングアニメーションは [[CSS Load.net>https:/...
CSS は loading.css に保存し、`<link />` とか `@import` で...
HTML は以下で lightbox.js に挿入する。
** lightbox.js の修正 [#he3e346d]
圧縮前の js を [[lokesh/lightbox2>https://github.com/loke...
lightbox.js の `Lightbox.prototype.build` の下あたりの ひ...
行中にある `<a class='lb-cancel'></a>` を探して、この中に...
Lightbox.prototype.build = function() {
var _this = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'><...
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
修正した lightbox.js は [[Javascript Compressor>https://j...
** 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; // 削除
}
以上。
ページ名: