小粋空間  -  a cheap joke and a play on words site

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

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

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

修正前

修正後

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

１．スタイルシートの修正

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;
}

２．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';
}
…後略…