2009/06/22

Highslide Lightbox JS 風 カスタマイズ

Lightbox JS 風にカスタマイズ - Trance Garden*
Lightbox JS 風にカスタマイズ

* 2009.02.16 Monday
* Serene Bach

たま~に使う程度のHighslide JSですが、これをLightbox風に表示させるカスタマイズ
表示位置を真ん中に、背景は半透明のグレーに。

highslide JS 過去ログ

参考にさせて頂いたサイト様
Highslide JS の表示を Lightbox JS 風にカスタマイズ - nlog(n)

* Highslide JS の最新版をサーバにインストールしておく
* リファレンスのページから,欲しい機能を探す (Highslide JS API Reference)
* 必要なスクリプトを調べる (「Requires」として示されている)
* コンフィギュレータのページを開く (Highslide JS - JavaScript thumbnail viewer)
* 必要な機能にチェックを入れる
* 「Download」ボタンをクリックし,highslide.js という名前で保存する
* サーバの highslide.js を,ダウンロードした highslide.js で置き換える

機能の追加
拡大画像をブラウザの中央に表示




背景を半透明グレーに着色




スタイルシートには次の記述を追加する。

.highslide-dimming {
position: absolute;
background: black;
}

* Newer: Movable Type Pro 4.25
* Older: 秘境温泉

関連エントリー

* Lightbox JS 風にカスタマイズ
* カテゴリーのプルダウン化
* カラーピッカー&文字リサイズ
* highslide JS