- ベストアンサー
iPhone/iPad向けWebサイトで、画像のみの拡大縮小を行う
iPhone/iPad向けWebサイトで、画像のみの拡大縮小を行う iPad向けにWebアプリを開発しています。 HTMLのページ内に埋め込まれた画像のみをgoogleマップのような感じに拡大・縮小・表示範囲の移動などを、iPadのUI(つまむ・なぞるetc)で行えるjavascriptないしAJAXのコード、もしくはライブラリを探しています。 PC向けのライブラリはjavascriptでもFlashでもいろいろあるようですが、どなたかご存知であれば教えていただけると非常に助かります。
- みっちー（@hmhm39）
- お礼率59% (62/104)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
拡大縮小の計算式に指の距離の変化を毎回入れていたので、 若干不安定な計算があったせいかもしれませんので、 拡大の動きだったら1.05倍、縮小の動きだったら0.95倍に統一してみました。 ただ、おっしゃる通りJSのイベント処理の限界の可能性もあります。。 また、heightはmobile safariではautoにしておけば、 widthに追従することがわかったので省略してます。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <style type="text/css"> <!-- #hoge{ border:2px solid #f00; } //--> </style> </head> <body> <ul> <li><img src="../hoge01.gif" width="200" height="200"></li> <li><img src="../hoge01.gif" width="300" height="100"></li> </ul> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> var x = 0; var y = 0; var min = 50; // 最小サイズ var max = 500; // 最大サイズ $("img").toggle( function () { $('img#hoge').attr('id',''); $(this).attr('id','hoge'); }, function () { $(this).attr('id',''); } ); document.addEventListener("gesturechange", gestureHandler, false); function gestureHandler(e){ x = $('img#hoge').width(); if(e.scale > 1){ var x_change = 1.05 * x; } else{ var x_change = 0.95 * x; } if(x_change < min){ x_change = min; } if(x_change > max){ x_change = max; } $('img#hoge').css('width',x_change).css('height','auto'); } </script> </body> </html>
その他の回答 (2)
- kuzumiHK
- ベストアンサー率72% (132/183)
クリックして選択した画像を拡大縮小できるようにしてみました。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <style type="text/css"> <!-- #hoge{ border:2px solid #f00; } //--> </style> </head> <body> <ul> <li><img src="../hoge01.gif" width="200" height="200"></li> <li><img src="../hoge01.gif" width="300" height="100"></li> </ul> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> var x = 0; var y = 0; var min = 50; // 最小サイズ var max = 500; // 最大サイズ $("img").toggle( function () { $('img#hoge').attr('id',''); $(this).attr('id','hoge'); }, function () { $(this).attr('id',''); } ); document.addEventListener("gesturestart", gestureHandler, false); document.addEventListener("gesturechange", gestureHandler, false); function gestureHandler(e){ x = $('img#hoge').width(); y = $('img#hoge').height(); var y_x = y / x; var x_change = e.scale * x; var y_change = e.scale * y; if(x_change < min){ x_change = min; y_change = y_x * min; } if(x_change > max){ x_change = max; y_change = y_x * max; } $('img#hoge').css('width',x_change).css('height',y_change); } </script> </body> </html>
補足
ありがとうございます。 これは素晴らしいです。 3000px × 3000px くらいの画像を500pxくらいのサイズで表示して、それを拡大して見てもらおうと思うのですが、やりたいのはまさにこれです。 やはりjquery.jsからのアプローチが王道なのですね。 ただ、ガクガクっと大きくなるのはjavascriptをiPadで動かす処理上の限界でしょうか。
- kuzumiHK
- ベストアンサー率72% (132/183)
ライブラリ的なものを見つけることができなかったので、 ちょっと粗いですが、jQueryを使ったサンプルを作ってみました。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> document.addEventListener("gesturestart", gestureHandler, false); document.addEventListener("gesturechange", gestureHandler, false); var x = 200; var y = 200; function gestureHandler(e){ var x_change = e.scale * x; var y_change = e.scale * y; if(x_change < 50){x_change = 50;y_change = 50;} if(x_change > 500){x_change = 500;y_change = 500;} $('#hoge').css('width',x_change).css('height',y_change); x = x_change; y = y_change; } </script> <div style="margin:50px;text-align:center;"><img src="hoge.gif" id="hoge" width="200" height="200"></div> 参考URL http://wiki.sohaya.com/index.php/%E3%83%9E%E3%83%AB%E3%83%81%E3%82%BF%E3%83%83%E3%83%81%E3%81%AE%E6%B4%BB%E7%94%A8
お礼
返事が遅れてしまってすみません。 普段のネット環境と開発環境が別でテストするのに時間がかかってしまいました。 やはり多少ガクガクしますが、これはjavascriptの限界でしょうね。 やりたいことはだいたい実装できたような気がします。 わざわざコードまで書いていただいて、本当にありがとうございました。