質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1501閲覧

ons-lazy-repeatとjQueryプラグインの組み合わせについて

takedai0313

総合スコア8

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/09/27 17:22

いつも参考にさせていただいております。
私が正しくMonaca(onsen-ui)やAngularを正しく理解できていないが故なのですが、
下記の内容について質問させていただけないでしょうか。

###ons-lazy-repeatとギャラリー系jQueryプラグインの組み合わせについて
Gallery.js
のような画像ギャラリーをmonacaを使い作成したアプリで実現したいと考えております。
そこでons-lazy-repeatと組み合わせる事で、負荷を抑えつつ実現できるのではないかと考えたのですが、
ons-lazy-repeatに要素が追加されるたびに実行するコールバック(今回でいうとGallery.jsを適応等)を設定する方法が不明だったため、
実現は難しいのかと予測しております。

そこで、ons-lazy-repeatで配置した画像に対してjQueryプラグインを適応する方法 あるいは
上記のようなギャラリーページを実現するにあたって、適切な方法・プラグイン等をご存知であればご教示いただけないでしょうか。

色々と試しはしておりますが、どこから解決の糸口を見つければよいか検討がついていないため、
ヒント等でも教えていただけると幸いです。

以上、よろしくお願い致します。

###補足情報(言語/FW/ツール等のバージョンなど)
Monaca Core Utility バージョン:2.0.6
jQuery (Monaca Version) バージョン:2.0.3
Cordova (PhoneGap) Loader バージョン:1.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決いたしました。
ons-lazy-repeatによって、画像を並べ、
下記のcssを適応することによって、
ons-lazy-repeatを3列で扱う事ができました。

css

1#photos { 2 /* Prevent vertical gaps */ 3 line-height: 0; 4 5 -webkit-column-count: 3; 6 -webkit-column-gap: 0px; 7 -moz-column-count: 3; 8 -moz-column-gap: 0px; 9 column-count: 3; 10 column-gap: 0px; 11 12 background-color: black; 13 padding:5px; 14 padding-right: 15px; 15 16} 17#photos img { 18 /* Just in case there are inline attributes */ 19 width: 100% !important; 20 height: auto !important; 21 margin-top: 10px; 22 margin-right: 5px; 23 margin-left: 5px; 24}

ありがとうございました。

投稿2017/09/28 08:28

takedai0313

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問