###前提・実現したいこと
Onsen UI V2 でピンチイン/ピンチアウトによる画像の拡大/縮小する機能を作成中です。
pushpageで遷移した先で、画像の拡大/縮小を行いたいのですがうまく動作しません。
遷移前のページでは拡大/縮小が動作しています。
動作するのであればAngularJSでも構いません。
解決方法がわかる方がおりましたらアドバイスください。
###発生している問題・エラーメッセージ
pushpageで遷移した先で、画像の拡大/縮小を行うためにCSSの書き換えを行っているが、反映されません。 <ons-gesture-detector>によるジェスチャーの検知は出来ています。 pushpage前のページであれば、問題なく拡大/縮小が出来ています。
###該当のソースコード
javascript
1var target = $("img.photo-zoom_jq"); 2var prevScale = 1; 3var scale = 1; 4 5$(document).on('transform', 'img.photo-zoom_jq', function(event) { 6 console.log('transform is detected.'); 7 scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); 8 target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); 9}); 10$(document).on('release', 'img.photo-zoom_jq', function(event) { 11 console.log('release is detected.'); 12 prevScale = scale; 13}); 14$(document).on('touchmove', 'img.photo-zoom_jq', function(event) { 15 console.log('touchmove is detected.'); 16 event.preventDefault(); 17}); 18
HTML
1<ons-navigator var="navi" page="page.html"> 2 </ons-navigator> 3 4 <ons-template id="page.html"> 5 <ons-page> 6 <ons-toolbar> 7 <div class="left"> 8 <ons-back-button>Back</ons-back-button> 9 </div> 10 <div class="center">Navigation</div> 11 </ons-toolbar> 12 13 <section style="padding: 10px"> 14 <ons-button ng-click="navi.pushPage('page2.html')"> 15 Push Page 16 </ons-button> 17 <ons-gesture-detector> 18 ↓push前(検知:OK|動作:OK)<br> 19 <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240"> 20 </ons-gesture-detector> 21 22 </section> 23 </ons-page> 24 </ons-template> 25 26 <ons-template id="page2.html"> 27 <ons-page> 28 <ons-toolbar> 29 <div class="left"> 30 <ons-back-button>Back</ons-back-button> 31 </div> 32 <div class="center">Navigation</div> 33 </ons-toolbar> 34 35 <section style="padding: 10px"> 36 <ons-button ng-click="navi.popPage()"> 37 Pop Page<br> 38 </ons-button> 39 <ons-gesture-detector> 40 ↓push後(検知:OK|動作:NG)<br> 41 <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240"> 42 </ons-gesture-detector> 43 44 </section> 45 </ons-page> 46 </ons-template>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/10 13:32
2016/11/10 14:20
2016/11/10 14:56
2016/11/10 15:03