Web制作

画像の一部を拡大するズーム機能を実装するなら「elevatezoom」が便利!

  • このエントリーをはてなブックマークに追加

ECサイトなんかでよく見かける光景かもしれませんが、カーソルを合わせた部分のみが拡大されて右側に表示されているサイトを見たことがありませんか?

そのサイトの多くが「elevatezoom」というjQueryプラグインを使って実装されています。

今回はその使用方法なんかをご紹介!

使用方法

elevatezoomからファイルをダウンロード。
その中の必要ファイルを読み込ませます。

言葉よりも実際のソースを見た方が良いと思うので、下記に一例を。

HTML

<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.elevateZoom.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#zoom').elevateZoom({
				//オプションはここに記載(※下記に詳細あり)
			});
		})
	</script>
</head>

<body>
	<img id="zoom" src="images/smallimage.jpg" data-zoom-image="images/largeimage.jpg" />
</body>

簡単に説明すると、imgのsrcが一般的に表示するもの、data-zoom-imageが拡大で表示するものです。
scriptを見てもらうと分かりますが、オプションを設定することもできます。
ギャラリーや大きさ、表示位置など細かく設定することもできるので、詳しくはConfiguration Optionsを見てみてください。

ちなみに・・・

「プラグイン」と聞くと簡単に実装できそうな感じがしますが、これは半分正解で半分は間違いです。
実装環境などに影響されますし、何かしらのCMSを使っている場合、その環境で大きく左右されます。

実装不可能ということはありませんが、他のscriptを読み込ませる必要が出てくる可能性があることも理解しておくと良いでしょう。

デモ

一応デモも載せておきます。

こんな感じですね!これは一番シンプルな形ですが、オプションを設定することで複雑な形も実装できるので、是非挑戦してみてください。

  • このエントリーをはてなブックマークに追加

  関連記事

コメントを残す

*

CAPTCHA