Webページ上で画像を拡大表示する際、単純にサイズの大きな画像をポップアップで表示したり
モーダルウィンドウを使って大きく表示したり、やり方はいろいろありますが、
ページ全体がクリックされたエリア(画像)に対してズームアップしていく演出で
画像などの拡大表示演出を加えられるjQueryプラグイン
「Create an Awesome Zooming Web Page With jQuery」がおもしろかったのでご紹介。

Create an Awesome Zooming Web Page With jQuery


Create an Awesome Zooming Web Page With jQuery | Design Shack


デモはこちら:Zooming Gallery

画面上のサムネイルをクリックすると、
その要素に向かって画面がズームアップします。

ズームアップ後はエリア外をクリックすることで
元の状態に戻ります。

実装もさほど難しくなく、
基本的には必要なプラグインファイルをHTMLから読み込んで、

◆HTML
<head>
	<title>Zooming Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
	<script type="text/javascript" src="sylvester.js"></script>
	<script type="text/javascript" src="purecssmatrix.js"></script>
	<script type="text/javascript" src="jquery.animtrans.js"></script>
	<script type="text/javascript" src="jquery.zoomooz.js"></script>
</head>

クリックする対象要素に
スクリプト実行の記述をするだけの様です。

◆SCRIPT
$(document).ready(function() {
	$(".zoom").click(function(evt) {
		evt.stopPropagation();
		$(this).zoomTo();
	});
	$(window).click(function(evt) {
		evt.stopPropagation();
		$("body").zoomTo();
	});
	$("body").zoomTo();
});

Zooming Test

ダイナミックにコンテンツ全体を演出できるので
どこかで使ってみたいプラグインです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

画像の拡大表示をページ全体がズームアップするエフェクトで演出するjQueryプラグイン「Create an Awesome Zooming Web Page With jQuery」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR