jQuery 不要の HighslideJS で画像の拡大縮小やテキストポップアップする


[初回公開] 2007年09月07日

最近では JavaScript を利用して画像の拡大やテキストのポップアップを行うのは jQuery を利用するのが一般的で手軽だが、jQuery を利用せずに Web サイトに実装する手法もあり、無償で配布されている HighslideJS を利用して画像やテキストを動的に操作する方法を紹介する。

jQuery 不要の HighslideJS で画像の拡大縮小やテキストポップアップする




1.HighslideJS とは


HighslideJS が配布されている公式サイト


HighslideJS とは海外で配布されている JavaScript で画像をクリックするとポップアップして拡大縮小できる他、画像をスライドショーさせたり文字列をポップアップさせる JavaScript も用意されている。
HighslideJS はオープンソースで配布されているがライセンス形態は無償版と有償版が用意されている。
無償版は個人のウェブサイトや学校サイト等の非営利の組織での利用に限られ、商業的なウェブサイトで利用する場合は有償版の取り扱いとなる。
-> HighslideJS 公式サイト

2.HighslideJS でできること


HighslideJS では次のことが行うことができ、用途に応じてそれぞれ用意されている JavaScript のファイルを使い分けられている。
HighslideJS を利用しているページをブラウザで表示させても無駄なソースコードを読み込むことがないので表示が早くて動作も軽い。



・キャプション付きの画像を拡大縮小せる
・画像を複数拡大表示してブラウザ内で移動させる
・画像をスライドショーさせる
・ページ内の画像をサムネイル化させる
・テキストをポップアップさせる
・YouTube の動画をポップアップウィンドウ化させる

3.HighslideJS で画像を拡大するサンプル


拡大する前のページに表示される画像

HighslideJS の代表的な動作の例が画像の拡大表示である。
上図はページ内に配置した画像をブラウザでそのまま表示した状態である。

画像をクリックして拡大表示させた状態

ページ内にある画像にマウスカーソルを合わせてをクリックすると上図のように拡大表示される。
拡大表示される際には画像の回りに縁と影が付き、同時に画像の説明文(キャプション)も指定することができる。
拡大した画像を縮小させたい場合は、同じく画像の上にマウスカーソルを合わせてクリックするだけでよい。

4.HighslideJS の使い方




HighslideJS をウェブサイトやブログに組み込むためには、まず公式サイトから HighslideJS をダウンロードする。
ダウンロードした ZIP ファイルを解凍すると約 30 種類のサンプルとそれらの HTML ファイルと JavaScript ファイルがあるので利用したい動作の HTML コードを参照して読み込んでいる JavaScript ファイルをコピーし、同じく HTML 内 に記載されている script タグ等を流用して自身のウェブサイトやブログに転記する。

関連記事