Highslide JSのキャプションのスタイルを調整する

Highslide JSのキャプションのスタイルを調整する

Posted at July 6,2010 2:55 AM
Tag:[Customize, HighSlide]

Highslide JSのキャプションのスタイルを調整するカスタマイズです。ご質問を頂きましたので本エントリーで紹介致します。

カスタマイズ内容はピンポイントですが、「Highslide JS でサムネイル画像を拡大表示する」の「White 10px border and drop shadow(ボーダー・角・影つき)」のキャプションの高さの調整です。修正後はキャプションの上下の空白を狭くします。

修正前
修正前

修正後
修正後

修正したHighSlide JSのバージョンは4.1.9です。

1.スタイルシートの修正

highslide/highslide.cssの441行目の「.wide-border .highslide-caption」のpaddingを変更します。

変更前

.wide-border .highslide-caption {
    padding: 0 10px 10px 10px;
}

変更後

.wide-border .highslide-caption {
    padding: 0 10px 0px 10px;
}

2.JavaScriptの修正

highslide/highslide.jsの1675行目あたりの内容を、次のように書き換えます。

変更前

…前略…
} else if (/^below$/.test(p)) {
    hs.setStyles(overlay, {
        position: 'relative',
        left: (- this.x.p1 - this.x.cb) +'px',
        right: (- this.x.p2 - this.x.cb) +'px',
        top: '100%',
        marginTop: this.y.cb +'px',
        width: 'auto'
    });
    this.y.p2 = overlay.offsetHeight;
    overlay.style.position = 'absolute';
}
…後略…

変更後

…前略…
} else if (/^below$/.test(p)) {
    hs.setStyles(overlay, {
        position: 'relative',
        left: (- this.x.p1 - this.x.cb) +'px',
        right: (- this.x.p2 - this.x.cb) +'px',
        top: '100%',
        marginTop: '5px',
        width: 'auto'
    });
    this.y.p2 = overlay.offsetHeight;
    overlay.style.position = 'absolute';
}
…後略…
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)