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

拡大画像を表示するレンズの形状やオーバーレイの設定など、豊富なカスタマイズが用意された画像の一部を拡大表示したり、カラーやくっきり表示にするjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery Loupe
デモページ

[ad#ad-2]

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>

スクリプトのオプション

shape
レンズの形状を設定できます。
circle/rounded/square
glossy
レンズの光沢を設定できます。
true/false
drop_shadow
レンズのシャドウを設定できます。
true/false

[ad#ad-2]

sponsors

top of page

©2018 coliss