ゼロからはじめるZoomi -単純だけど面白い!スクリプト要らずのWeb画像拡大術

Zoomiとは？

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

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

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

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

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

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

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

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

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