ども。鉄王です。
「なにやら『Shadowbox.js』がステキらしい」と聞いて、今作ってるサイトに組み込んでみました。組み合わせたコアライブラリは最近の定番、jQueryです。
ハマったのが、画像ローディング中のアニメGIF（loading.gif）がなかなか表示されなかったこと。ダウンロードしたZIPファイルを展開して
/foo
- index.html（このページでShadowbox.jsを使ってサムネイル表示）
/bar
- /css
- /js
- /images
みたいな感じで放り込んだんですが、一向に表示される気配ナシ。
で、いろいろ試した結果、loading.gifのパス指定でしくじってました〜アヒ〜（恥）。loading.gifを相対パスで指定する場合、表示する(X)HTMLファイルを基準にして考えないとダメなんすよね。
(X)HTMLファイル（/foo/index.html）の<head>セクションには、こんなふうに書き込まないといけないわけで。
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = {
loadingImage: ’../bar/images/loading.gif’
};
Shadowbox.init(options);
});
//]]>
</script>
「var options = 〜」なんてオプションがあるから、てっきりshadowbox.jsを基準にした相対パスでいいものだと思ってましたわ。
ついでについでに。
『Shadowbox.js』って英語圏のライブラリなんで、拡大表示したときの「Close」「Previous」「Next」などの表記（テキストリンク）を日本語にしたい！ってケースがあると思います。そんなときは、上記の「var options = 〜」の部分を、ごにょごにょとこんなふうに。
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = {
loadingImage: ’../../bar/images/loading.gif’,
text: {
cancel: ’キャンセル’,
close: ’閉じる’,
prev: ’前の画像’,
next: ’次の画像’
}
};
Shadowbox.init(options);
});
//]]>
</script>
まだまだ奥が深そうなので、ぼちぼち攻めていきますぜ。
Leave a reply