Shadowbox.jsのキャプション位置を画像の下に変えてみる

必要に迫られてググってみたものの、意外にも日本語のドキュメントが見つからなかったので試行錯誤の結果も兼ねてまとめてみます。

要は shadowbox.js の中身をちょっと書き換えればよいのですが、改行やスペースを徹底的に削除して軽量化が図られてるのでヒジョーに読みづらい。そこで、まずはGitHubからShadowboxのソースをダウンロードしてきます。

mjijackson/shadowbox – GitHub
https://github.com/mjijackson/shadowbox

展開して source フォルダ内の skin.js を開きます。今日現在の最新版であれば、413行から始まるHTMLタグの文字列を見てみます。

'<div id="sb-container">' +
    '<div id="sb-overlay"></div>' +
    '<div id="sb-wrapper">' +
        '<div id="sb-title">' +
            '<div id="sb-title-inner"></div>' +
        '</div>' +
        '<div id="sb-wrapper-inner">' +
            '<div id="sb-body">' +
                '<div id="sb-body-inner"></div>' +
                '<div id="sb-loading">' +
                    '<div id="sb-loading-inner"><span>{loading}</span></div>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<div id="sb-info">' +
            '<div id="sb-info-inner">' +
                '<div id="sb-counter"></div>' +
                '<div id="sb-nav">' +
                    '<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>' +
                    '<a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a>' +
                    '<a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a>' +
                    '<a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a>' +
                    '<a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>' +
'</div>';

上記のうち

        '<div id="sb-title">' +
            '<div id="sb-title-inner"></div>' +
        '</div>' +

の3行がタイトル(キャプション)あたる箇所なので、この3行をカットして

        '<div id="sb-info">' +

の前に挿入後、いったん保存。

次は本丸、shadowbox.jsの書き換え。エディタの検索機能で

T.markup='<div id="sb-container">

という文字列を検索します。すると T.markup= の次から始まる

'<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div>';

が見つかるので、この塊をさきほど保存したskin.js(の一部)と差し替えればオッケイとなります。

お気づきかと思いますが、実はこんな回り道をしなくても、実はshadowbox.jsを直に書き換えればよかったりします ;-) ただ、あまりに可読性がよろしくないので、きれいにインデントされたソースを改造した方が早道では?と考えて紹介した次第です。

……と書いてる私のサイト、Shadowboxのキャプションが画像の上だったりするんですよねー。うはは。

[2011.4.14追記]
別解として skin.js を変更後 Shadowbox.js を新規作成(ビルド)する方法を書きました。RubyとRake(Rubyで動くビルドツール)必須ですが興味のある方はぜひ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください