画像をアニメーションでスケール表示するjQueryプラグイン

ギャラリーや商品紹介のWEBページで、アート作品や商品の画像では実際の大きさが分かりにくいという問題を解消するために、画像をアニメーションしながらスケール表示に切り替えるjQueryプラグイン「jQuery View in Room」を作成しました。

WEB上の画像で実物の大きさをイメージしてもらいたい時に利用してもらえることを想定しています。

どういう動きをするかは実際に見てもらった方が早いと思いますので、下の「デモ」にある「クリックして壁掛け（スケール）表示」のリンクをクリックしてみてください。

デモ

ひまわり
92.1 cm × 73 cm
クリックして壁掛け（スケール）表示

モナ・リザ
77 cm x 53 cm
クリックして壁掛け（スケール）表示

使い方

ターゲットとなる画像はあらかじめimgタグでレンダリングしてください。
また、クリックした時にスケール表示に切り替えるリンク（ボタン）などもレンダリングしておきます。

<div class="entry">
  <div class="blk1">
  <img id="view_in_room_img" src="./s-1_53x77.jpg" alt="モナ・リザ" />
  </div>
  <div class="blk2">
  モナ・リザ<br />77 cm x 53 cm<br />
  <a id="view_in_room_btn" href="">クリックして壁掛け（スケール）表示</a>
  </div>
</div>

プラグインの設定は、window.load 内で行ってください。
スケール表示に切り替えるリンク（ボタン）のエレメントに対して行います。

$(window).load(function(){
	  $("#view_in_room_btn").viewinroom({
	      imgRoom : './images/scale-image.jpg' //background image
	      ,eleImg : $("#view_in_room_img")  //front image
	      ,imgRoomWidthCm :  257  // real width of background image [cm]
	      ,imgWidthCm : 53 // real width of front image [cm]
	  });
});

imgRoom　：　スケール表示に切り替える時に表示する画像のURLを指定
eleImg　：　ターゲット画像タグのエレメント
imgRoomWidthCm　：　スケール表示切替時の背景画像の横幅の実際の長さ　（単位センチメートル）
imgWidthCm　：　ターゲット画像の横幅の実際の長さ　（単位センチメートル）

imgRoomWidthCm と imgWidthCm で指定した実際の長さを考慮して、背景画像の上にターゲット画像を縮小しながら重ねてスケール表示することができます。