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
画面上のサムネイルをクリックすると、
その要素に向かって画面がズームアップします。
ズームアップ後はエリア外をクリックすることで
元の状態に戻ります。
実装もさほど難しくなく、
基本的には必要なプラグインファイルを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(); });
ダイナミックにコンテンツ全体を演出できるので
どこかで使ってみたいプラグインです。
ご参考までに。。。