マウスオーバーで画像をズーム表示するjQueryの紹介

2013/10/07

画像をズーム表示

zoom jQuery

マウスオーバーで画像をズームして表示するためのjQueryプラグインを紹介します。
大きな画像を表示したいがその画像ば場所をとるのは避けたい。
そんな時に、小さい枠で表示しておきマウスを載せた箇所が拡大表示されるためとても便利です。

ダウンロードはGitHubから行えます。
ダウンロードしたディレクトリ内の「demo.html」を見ることで、一通りの設定方法が分かると思います。

GitHub

設定例

htmlを以下のように記述します。


<span class='zoom' id='ex1'>
	<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
	<p>Hover</p>
</span>
<span class='zoom' id='ex2'>
	<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
	<p>Grab</p>
</span>

CSSを以下のように記述します。


/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

/* these styles are for the demo, but are not required for the plugin */
.zoom {
	display:inline-block;
	position: relative;
}

/* magnifying glass icon */
.zoom:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}

.zoom img {
	display: block;
}

.zoom img::selection { background-color: transparent; }

#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }

JavaScriptを以下のように記述します。


$(document).ready(function(){
	$('#ex1').zoom();
	$('#ex2').zoom({ on:'grab' });
});

「ex1」の値はhtmlで記述したIDと合わせてください。
zoom関数では、上記の「デフォルト(指定なし)」と「grab」の他に「click」、「toggle」が指定できます。
それぞれの動作は以下のようになります。

タイプズーム方法
zoom()マウスオーバー
zoom({ on:'grab' })マウスダウン
zoom({ on:'click' })クリックした後マウスオーバー
zoom({ on:'toggle' })クリック
  • このエントリーをはてなブックマークに追加
Related

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る