画像を格好よく拡大させるスクリプト

Web活用備忘録

こんにちは。アイタス制作の新人？Tです。

Webサイトに画像は必須。特にECサイトや不動産情報サイト、写真やイラストのギャラリーサイトでは大きな写真が無いとユーザーに見てもらえません。

とはいえいきなり大きな画像を掲載しても、読み込みに時間がかかってしまいます。

そこで「ちいさな画像（サムネイル）をクリックし拡大画像を表示」ということが行われていますが、少し前はFlash、最近ではJavascriptを用いて拡大画像の表示処理にも演出を加えるようになってきています。

今回は、アイタス制作スタッフが気にかけている「画像拡大表示」スクリプトをご紹介していきたいと思います。

lightbox2.js
定番の感のあるスクリプト。サムネイルをクリックすると拡大画像が「ひょいっ」と表示されます。この種類のスクリプトで最古のスクリプトlightbox.jsの後継だけあって、動作も安定しています。数年前に登場したときは、「このFlashどうなってんの？」と思ったものです……。

jQuery Lightbox plugin
上記とほぼ同じ動きですが、より動作の軽いスクリプトです。私はこちらのほうが好きですね。

jQuery.flyout
画像ズームの動きがおもしろいスクリプト。Flashのような動きが欲しいときにはいいかもしれませんね。

Highslide JS
上記jQuery.flyoutに加え、キャプションの位置や拡大画像の周囲の枠の有無を変えることができます。動作もこちらのほうが若干早い印象ですね。

MojoMagnify
画像にカーソルを乗せると、カーソルのまわりに拡大画像が表示されます。モノクロ写真を部分的にカラーにしたり、という演出もできます。このスクリプトこそ「ウォーリーを探せ！」に必要なツールだと思います。

magiczoom
上記MojoMagnifyのアイデア元になったスクリプト。拡大画像を別の場所に表示し、なおかつカーソルの動きに合わせて拡大している場所が移動します。レイアウトも自由で使いやすい！

他にも類似のスクリプトはたくさんありますし、アイデア次第で「拡大画像を表示させる」以外の使いかたをすることもできますね。

＜制作＠アイタス＞

このエントリのキーワード:Webデザイナー, 社内勉強会