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


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

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

用意するのは、

 ・アート作品や商品などの画像 - (あらかじめページ上にimgタグでレンダリングされている)
 ・スケール表示に切り替えた時に背景画像として表示する画像

の二つの画像ファイルです。

スケール表示に切り替えた時の背景画像は、椅子とか机とか、比較になるものが写っているとよいと思います。
デモで使っている画像のように、“○○○cm”のような尺度が表示されていると尚良いかも。

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

デモ

このjQueryプラグインのソースコードはhttps://github.com/masanoritomizawa/jquery.viewinroomにあります。

使い方

ターゲットとなる画像はあらかじめ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 : ターゲット画像の横幅の実際の長さ (単位センチメートル)

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

タグ: ,
カテゴリー: WEB

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

はてなブックマーク人気エントリー
カテゴリー