【ZooMove】マウスオーバーで画像をズーム表示できるjQueryプラグイン【jQueryプラグイン】

ここがおすすめ

簡単なコードで画像にズーム効果を付けられておすすめです。imgタグでなくfigureタグを使っているのがちょっと変わっています。

サンプル

ZooMove | jQuery Zoom Image Examples項目

公式サイト

ZooMove | jQuery Zoom Image

jQuery

導入方法

必要な段取り

このプラグインを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlファイルへのプラグイン呼び出しの記述
• 3.figureタグへのコード追加

が必要になります。
以下、詳しく解説します。

1.ファイルの取得と読み込み

このプラグインに必要なファイルは

• zoomove.min.css
• jquery-2.1.4.min.js(query本体)
• zoomove.min.js

jQuery本体以外は上記zoomove公式サイトよりダウンロードできます。
jQuery本体はjQueryの公式サイトより。

上記ファイルをhtmlファイルへ読み込みます。

以下公式サイトより引用

<!-- ZooMove CSS minified -->
<link rel="stylesheet" href="dist/zoomove.min.css">

<!-- jQuery CDN JS minified (must) -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- ZooMove JS minified -->
<script src="dist/zoomove.min.js"></script>

2.htmlファイルへのプラグイン呼び出しの記述

当プラグインを呼び出す記述をhtml内に記述します。

以下公式サイトより引用

<script>
   $('.zoo-item').ZooMove();
</script>

3.画像のタグへのコード追加

figureタグに必要なコードを記述します。

以下公式サイトより引用

<figure class="zoo-item" zoo-image="img/example.jpg"></figure> 

さらにここにオプションを記述することでさまざまな動作を実装できます。

以下公式サイトより引用

<!-- Image 1 | Default -->
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>

<!-- Image 2 | Scale value "3" (300%) -->
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-scale="3"></figure>

<!-- Image 3 | Over "true" and Move "false" -->
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-over="true" zoo-move="false"></figure>

くわしくは、公式サイト内、How to use項目を参照してください。