JavaScript（HighslideJS）で画像をクリックした時に拡大縮小させる方法

[最新更新] 2024年03月19日
[初回公開] 2007年09月07日

ウェブサイトやブログ内に配置した画像をクリックした時に拡大縮小する機能を付ける場合は JavaScript を利用することで実装が可能だが、最近では Vue.js や jQuery といったライブラリを用いることで簡単に多くの機能を付けることができるが、ライブラリを利用することのデメリットもあるため、無償で配布されている HighslideJS を利用して画像拡大縮小させる方法を紹介する。

１．JavaScript のライブラリの主流

JavaScript のライブラリの主流は、日々新しい技術が公開されたりバージョンアップされており、最近では Vue.js、jQuery、React.js などが挙げられる。
ライブラリを利用することでゼロから JavaScript をプログラムする必要がなくなり、工数削減と実装するための学習コストを抑えることができる。

また、フレームワーク化されていることから複数人で作業する場合に一定のルールに基づいてプログラムするのでエンジニア個々の癖でコーディングされることがなく統一されるメリットがある。

２．JavaScript のライブラリを利用するデメリット

JavaScript のライブラリを利用する利点は多いものの、デメリットも存在する。
例えば、jQuery をウェブサイト上で動作させる場合はメインスクリプトを jQuery 公式サイトから読み込むコードを HTML 内に記述する。

そのため、ウェブサイトやブログの閲覧者がブラウザで表示する場合は jQuery も外部サイトから一緒に読み込まれるが、jQuery がダウンしていたり、バージョンが変わることで正常に動作しなくなることがある。

そのため、ライブラリやフレームワークを利用せずに HTML 内もしくはウェブサーバ上に JavaScript を配置して独立して動作させることでデメリットを回避することができる。

３．JavaScript で画像を拡大縮小する方法

JavaScript で画像を拡大縮小する方法としては、ライブラリやフレームワークを利用する他に、機能ごとに配布されている JavaScript をダウンロードして利用する。

JavaScript は多くの運営団体や個人が無償で公開しているものが多く、その中で HighslideJS を利用して画像をクリックした時に拡大縮小する方法が次の通りである。

3-1．HighslideJS とは

HighslideJS とは海外で配布されている、画像をクリックするとポップアップして拡大縮小できる他、画像や文字列をスライドショーさせることができる JavaScript のソースコードである。

HighslideJS はオープンソースで配布されているがライセンス形態は無償版と有償版が用意されている。
無償版は個人のウェブサイトや学校サイト等の非営利の組織での利用に限られ、商業的なウェブサイトで利用する場合は有償版の取り扱いとなる。
-> HighslideJS 公式サイト

3-2．HighslideJS でできること

HighslideJS では主にクリックするとポップアップして表示させる機能をウェブサイトやブログに実装することができ、用途機能に応じて JavaScript のファイルを使い分けられている。

ライブラリを用いた JavaScript の実装と比較して HighslideJS を利用しているコンテンツの方がブラウザで表示させても無駄なソースコードを読み込むことがないので表示が早く、動作も軽い。

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

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

HighslideJS で画像を拡大するサンプルは公式サイトでデモで確認することができ、例えば下図のようにウェブサイト内に画像を配置しているとする。

この画像を HighslideJS を使ってクリックした時に拡大した様子が下図となる。

拡大表示した際には画像の回りに枠線と影が付き、同時に画像の説明文（キャプション）も表示することができる。
拡大した画像を縮小させたい場合は、同じく画像の上にマウスカーソルを合わせてクリックするとポップアップが消えて元のウェブサイトの状態に戻る。

3-4．HighslideJS で画像を拡大縮小する方法

HighslideJS をウェブサイトやブログに組み込むためには、まず公式サイトから HighslideJS をダウンロードする。
ダウンロードしたファイルは ZIP 形式で圧縮されており、解凍すると約 30 種類の HTML ファイルと JavaScript ファイルのサンプルが展開される。

それぞれ HTML をブラウザで開いて動作を確認するとともに、JavaScript ファイルをウェブサーバに配置して HTML に記載されているソースコードを自身のウェブサイトに転記することで実装することができる。

JavaScript ファイルを利用しない場合は HTML の HEAD タグ内に記載することもでき、上図のように onClick でクラスを実行することでマウスがクリックされた時に動作する。

関連記事