TopJavaScriptHighslide JS > 2010年7月
2010年7月 6日

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

July 6,2010 2:55 AM
Tag:[, ]
Permalink

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';
}
…後略…
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3