jQuery ElevateZoom 虫眼鏡や右枠に画像を拡大してルーペ表示

ElevateZoom
2014/03/24

画像をルーペ表示

概要

ElevateZoom jQueryプラグインを使って、画像を拡大表示する方法を紹介します。

このプラグインを使うことで、虫眼鏡を使っているようなルーペ機能を実装することができます。
画像自体を拡大表示したり、右枠にマウスオーバーされた箇所の拡大画像を表示することも簡単にできちゃいます。

ショッピングサイトなどに

ルーペする機能はいろいろな場面で使用できますが、特に多いのはショッピング系サイトです。
商品の画像を細かく見せたいが、大きな画像を表示するスペースは無いときなどにとても便利です。

シンプルでありながら、商品の細かい部分も見せることが簡単にできるんです。

実装手順

ダウンロード

elevate zoom よりファイルをダウンロードします。
ダウンロードしたzipファイルを解凍すると、jquery.elevatezoom.jsがありますので、こちらを使用します。

demo.html にサンプルがあるのでご覧ください。

サンプルコード

まずは、jqeuryとelevatezoom.jsを読込みます。


<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>

次に画像を表示します。


<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

表示したimgタグにelevateZoomを実装します。


$('#zoom_01').elevateZoom({
	zoomType: "inner",
	cursor: "crosshair",
	zoomWindowFadeIn: 500,
	zoomWindowFadeOut: 750
});

elevatezoomではオプションが豊富なのでいろいろ試してみてください。
例えば、zoomTypeを「lens」にすると虫眼鏡のように表示され、「window」にすると右枠に表示されます。

たったこれだけで、画像のルーペ機能を実装できるんです。
完成版ソースも載せておきます。


<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>

<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

$('#zoom_01').elevateZoom({
	zoomType: "inner",
	cursor: "crosshair",
	zoomWindowFadeIn: 500,
	zoomWindowFadeOut: 750
});
  • このエントリーをはてなブックマークに追加
Related

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...

jQuery UI ドラッグ&ドロップで並び替え sortableの使用方法

sortable 概要 jQuery UIを使用して、ドラッグ&ドロップで並び替えを行います。 sortableを使用することで、一瞬で実装できちゃいます...
トップへ戻る