次のように、ハイスライドの「読み込み」を中央に配置するのが好きです。
.highslide-loading {
display: block;
position:fixed;
top:50%;
left:50%;
height:32px;
width:32px;
padding: 24px;
margin:-40px 0 0 -40px;
text-indent:-9999em;
background:#FFFFFF url(img/hslide_loader_white.gif) 50% 50% no-repeat;
-webkit-box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75);
box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75);
-webkit-border-radius: 3px;
border-radius: 3px;
}
ただし、highslide スクリプトは次のようなインライン スタイルを出力します。
element.style {
left: 134px;
opacity: 0.9;
position: absolute;
top: -9999px;
z-index: 1003;
}
ローディング オブジェクトにアクセスする方法を説明している古いサポート フォーラムでこのスレッドを見つけました: http://highslide.com/forum/viewtopic.php?f=1&t=1796&p=7975
hs.Expander.prototype.onShowLoading = function (sender) {
var width = sender.thumbWidth;
sender.loading.style.width = width +'px';
};
これは「位置」でも機能しますが、「上」または「左」では機能しません
なぜなら：
top と left の値は onShowLoading イベントの後に設定されるため、イベント ハンドラで編集することはできません。これを修正するには、highslide.js ファイル自体を編集します。もう 1 つの方法は、読み込み中のラベルに marginLeft と marginTop を設定し、Highslide に上と左を実行させることです。
ただし、highslide スクリプトの使用方法はさまざまで、highslide.js のコードベースを保持する必要があります。マージンは私を助けません。
カスタム構成スクリプトを作成しましたが、hs.loading にアクセスできません。
if (typeof(hs) != "undefined") {
$.extend(true, hs || {}, {
dimmingOpacity:0.75,
...,
loading: hs.createElement('a', {
className: 'highslide-loading',
title: hs.lang.loadingTitle,
innerHTML: hs.lang.loadingText,
href: 'javascript:;'
}, {
position: 'fixed',
top: '50%',
opacity: hs.loadingOpacity,
zIndex: 1
}, hs.container
)
});
}
hs.overrides ( http://highslide.com/ref/hs.overrides ) にもローダーへのアクセスはありません
ローダーをウィンドウの中央に配置する方法はありますか?
そうでない場合-調査を停止します;-)