nlog(n)

Highslide JS をカスタマイズして使うための作業の流れについてまとめる。

Highslide JS は，Web のサムネイル画像をポップアップで拡大表示するための JavaScript である (Highslide JS - JavaScript thumbnail viewer)。Web の画像ビューアで有名なのは Lightbox JS で (Lightbox JS)，別にバージョン2も公開されている (Lightbox 2)。その他にも色々あるようだ (Lightboxスクリプトいろいろ - DesignWalker)。

画像ビューアとしては，ブラウザの表示エリアが狭い場合，ポップアップ画像を画面の大きさに合わせて縮小してくれる機能があると嬉しい。私の試してみた限りでは，これが可能なビューアは Highslide JS と Lightbox Plus (Lightbox Plus) の2つしかなかった。このブログでは，長い間 Lightbox Plus を使っていたが，先日 Highslide JS に切り替えた。Lightbox Plus が気に入らなかった訳ではないが，Highslide JS には Lightbox Plus にはない「画像をマウスで移動させることができる」という機能があるためである。

Highslide JS では，API が公開されており，細かいカスタマイズが可能である。ところが，何となくやってみると上手く動作しなかったりして，ハマりやすい。実はハマったのだった。そこで，カスタマイズの流れをまとめておくことにした。

Highslide configurator

実際に嵌まった例を紹介する。ポップアップした画像を画面の中央に表示させたいとする。これは hs.align を設定すれば可能であることが分かった (Highslide JS API Reference : hs.align)。これをヘッダで設定したのだが，動作しない。昔のバージョン highslide-3.2.10 では動作するが，最新版 3.3.11 では動作しないのである。「エンバグだろうか?」と思ったが，実は違った。その機能が標準の highslide.js に入っていなかっただけだったのだ。パッケージの中には，「全部入り」のフルバージョンが同梱されているので，これを使うという手もある。しかし，フルバージョンは 70 kB 近くある。かなり大きいので，可能なら減らしたい。作者のサイトには，この要望を満たすような highslide.js 作成用のページが用意されていた。必要な機能だけを選べば 20 kB 程度まで削減できる。作業の流れは次のようになる。

1. Highslide JS の最新版をサーバにインストールしておく
2. リファレンスのページから，欲しい機能を探す (Highslide JS API Reference)
3. 必要なスクリプトを調べる (「Requires」として示されている)
   (例えば，中央表示であれば hs.align に必要なのは positioning だということが分かる (Highslide JS API Reference : hs.align))
4. コンフィギュレータのページを開く (Highslide JS - JavaScript thumbnail viewer)
5. 必要な機能にチェックを入れる
   (中央表示であれば，「Advanced positioning」にチェックを入れる)
6. スクリプトの大きさを小さくするために「Pack it!」にチェックを入れ，「Update」ボタンをクリックする
   (Pack すると，大きさが半分になる)
7. 「Download」ボタンをクリックし，highslide.js という名前で保存する
8. サーバの highslide.js を，ダウンロードした highslide.js で置き換える

この作業の実例「Highslide JS の表示を Lightbox JS 風にする」については，別の記事で紹介する。

2008年2月28日追記:
Lightbox 風の設定について書きました (nlog(n): Highslide JS の表示を Lightbox JS 風にカスタマイズ)。

• Tweet