[JS]画像の一部を拡大・カラー・くっきり表示するスクリプト -jQuery Loupe

サイト構築 -JavaScript

Post on:2011年8月15日

jQuery Loupeのデモ

まずは、そのさまざまなエフェクトを備えたデモからご紹介。

デモ1
スクリプトの基本性能をみるためのデモです。
クラシックな円形のレンズ、暗い半透明のオーバーレイ、マウスホイールでレンズサイズの変更、[Z]を押したままで表示箇所を移動します。
※レンズ内の画像は元画像と同じものが表示されます。

デモ2
少しだけカスタマイズした例で、レンズの形状、オーバーレイの画像を変更したものです。

デモ3
レンズの形状は設定で簡単に変更できます。
このデモでは、レンズを矩形にし、レンズのシャドウのエフェクトを除いています。
レンズ内の画像は拡大画像が表示されます。

デモ4
オーバーレイを除くことも可能です。
レンズは円形、シャドウ無しで、拡大画像が表示されます。

デモ5
異なる画像をレンズに表示するのも面白い効果を生み出します。
元画像をグレースケール、レンズ用の画像にカラーを使用すると、面白いエフェクトを与えることができます。

元画像を少しぼやけたものにします。

レンズ画像をくっきりしたものにします。

デモ6
レンズ内の箇所のみくっきり表示させる素敵なエフェクトです。

jQuery Loupeの実装

jQuery Loupeの実装は簡単です。

外部ファイル

「jquery.js」と当スクリプト、スタイルシートを外部ファイルとして指定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.loupe.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.loupe.css" />

HTML

最初に表示される元画像をimg要素で配置します。idはjQueryのセレクタで使用します。

<a href="#"><img alt="Your image caption" src="your-image.jpg" id="loupe1" /></a>

レンズに異なる画像（例：拡大画像やカラー画像など）を表示する際は、a要素に配置します。

<a href="image-big.jpg"><img alt="Your image caption" src="your-image.jpg" id="loupe1" /></a>

JavaScript

jQueryのセレクタ（#loupe1）でレンズの適用する要素を指定します。

<script type="text/javascript">
$(document).ready(function(){
   $('#loupe1').loupe({
      'max_size' : 600,
      'loupe_toggle_time' : 'fast'
   });
});
</script>