[JS]画像の一部を拡大するシンプルで実用的なスクリプト -Easy Image Zoom

プロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。

jQuery plugin: Easy Image Zoom
デモページ

[ad#ad-2]

デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。

スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。

Eazy Image Zoomの実装

HTML

サムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

CSS

拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:15px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #555;
	-webkit-box-shadow:0 0 10px #555;
	box-shadow:0 0 10px #555;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

[ad#ad-2]

JavaScript

「jquery.js」と「easyzoom.js」を外部ファイルに指定するだけで、実装が可能です。
class名などに独自のものを使用することも簡単に対応できます。

スクリプトのオプション

id

任意のidを付与することができます。デフォルトは「easy_zoom」です。

parent

画像をズームするエレメントが挿入されるDOMエレメントです。デフォルトは「body」です。

append

デフォルトの「true」では親エレメントの最後の子として挿入し、「false」では親エレメントの最初の子として挿入します。

preload

大きい画像のローディング時に表示するデータです。デフォルトはテキストデータですが、HTMLでも可です。

error

大きい画像が読み込めない際のエラー時に表示するデータです。

これらのオプションを使用すると、スクリプトは下記のようになります。

jQuery(function($){
	$('a.zoom').easyZoom({
		id: 'easy_zoom',
		parent: 'body',
		append: true,
		preload: 'ローディング時のメッセージ',
		error: 'エラー時のメッセージ.'
	});
});