Zoomiとは？

Zoomiは、サムネール画像にマウスが重なったときに拡大画像を表示するというライブラリです。

サムネール画像上にマウスを重ねると迅速に拡大画像が表示される

より正確に説明すると、サムネール画像と、拡大時に表示する画像の2種類を用意しておき、マウスがサムネール画像に重なった際に拡大時画像を表示するという仕組みになっています。

一方、大きな画像に対して小さなサイズのものを表示するといった逆の処理は正しく行なわれないので注意が必要です。つまり、同じサイズの画像か、それよりも大きいサイズの画像でないと正しく動作しません。

Zoomiは、HTMLページ内にスクリプト(プログラム)を記述しなくてよいという利点があり、全くプログラムが分からない人でも気軽に使えます。ZoomiではHTMLの<img>タグのclass属性にzoomiを指定し、マウスオーバー時に表示する画像のURLをalt属性に指定するだけで以後の処理が自動的に行われます。

ZoomiはこのURLにあるページからダウンロードできます(*1)。ページ上部にある「Download Zoomi」が、zoomi.jsファイルへのリンクになっています。これをクリックしてダウンロードするか、右ボタンクリックでファイルを保存します。

Zoomi公式サイト

また、ZoomiはjQueryライブラリを使用しているのでjQueryライブラリをダウンロードする必要があります。jQueryはこのURLにあるページからダウンロードすることができます。

jQuery公式サイト

「Download jQuery～」とあるリンクをクリックしダウンロードします。いくつか種類がありますが、これらはコンパクト化されたものかどうか、ZIP圧縮されたものかどうかという点で違っています。わからない場合はどれをダウンロードしても構いません。

公式サイトからjQueryをクリックした先のダウンロード画面

以後説明するサンプルではダウンロードしたjQueryライブラリのファイルはjquery.jsと名前を変更して使用しています。

*1ここではβバージョンで説明しています。