ons-carouselで画像の拡大縮小を行いたい

Question

monacaを使ってiPhoneの写真一覧みたいな画像を拡大縮小できる
カルーセルを作成したいと思っています。
画像の表示はできたのですが、ピンチインピンチアウトでの画像の
拡大縮小ができません。
どのようにすればよろしいでしょうか？

Answer 1

jQueryが必要ですが、Onsen UIを使用しているのであればMonaca公式ガイドブックにあるサンプルが使いやすいのではないでしょうか。
https://ja.monaca.io/book/support/
ページ中央あたりにある「第6章 6-7 イメージの拡大縮小」です。

Comments

[MotherHacker]

上記のサンプルを作成した時はうまく拡大縮小できました。
カルーセルに組み込むと画像の拡大縮小はできませんでした。
ちなみにカルーセルの画像は何枚あるかわからないのでng-repeatで出しています。

[t0kura-5]

カルーセル内に組み込んでも問題なく動くはずですが、もしかしたらカルーセルを表示しているページは別のページからpushpageで遷移してきたページでしょうか。

[MotherHacker]

他のページからpushpageしています。

[t0kura-5]

私も同様のところでつまずいたのですが、pushpageをすると遷移した先の画像が読み込まれないそうです。そこで、遷移したページでonsen-uiのinitイベントを行い、画像を読み込む必要があります。
以下の回答をご参照ください。
https://teratail.com/questions/54714

上記回答内で触れられていますが、以下のページの「init」のところに具体的な使い方があります。
https://ja.onsen.io/v2/docs/guide/js/

[MotherHacker]

色々回答して頂いてありがとうございました。
結局カルーセルの画像を拡大縮小する必要が無くなってしまいました。

Answer 2

ご存知かとは思いますが、ons-carouselは単にカルーセルを実装させるだけの機能で、ピンチインピンチアウトは全く別のものとして実装する必要があります。

jQueryを使用しなければいけませんが、以下の様なプラグインがあるようなので使えるのではないでしょうか。
jQueryプラグインzoomerを使ってスマホサイト用の画像拡大縮小機能を実装してみた : http://migo-media.com/zoomer-mobile/

Comments

[MotherHacker]

ご回答ありがとうございます。
拡大縮小ボタンが出るのが思っていたのと違いますが、他に方法が無ければ検討したいと思います。