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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

759閲覧

jQueryプラグイン「Infinite Scroll」を使った次ページの挙動について

waon

総合スコア17

jQueryプラグイン

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/06/05 06:43

jQueryプラグイン「leanmodal」「slick」を使って、
画像をクリック→スライダーモーダルが出現、というアクションが行えるギャラリーページを作りました。

■ 画像をクリック (例: No.01の上の画像をクリック)
イメージ説明

■モーダルが出現。 (モーダル内はスライダーになっています)
イメージ説明

ここまでの動きは問題ないのですが、
このギャラリーページは2ページ目、3ページ目、、、と複数のページがあるので、
ページ下部にページャーを設置しました。

これに「infinite scroll」というjQueryプラグインを使って、
ページ下部に移動すると自動で次ページのコンテンツを読み込み、
下につなげる、いわゆる無限スクロールアクションを追加しました。

ここまでも問題なかったのですが、
次のページが読み込まれたときに、モーダルは正常に動いているのですが、
スライダーが機能せず、スクリプト側でおこなうはずの
スライダー用のclass付与や、CSSスタイル適用がされない状態でした。

■本来は上記の2枚目の画像と同じレイアウトになるはずがならない。。
イメージ説明

コードは以下のような感じ(みづらくなるので質問に不要なコードは削除してます)です。
なぜ、次ページの読み込みされたページは、modalまでしか正常に機能しないのでしょうか?

html

1<div class="gallery"> 2 <div class="gallery-list"> 3 <div class="gallery-item"><a rel="leanModal" href=”#modal01”></a><img src="01_thumb.png"></div> 4 <div class="modal" id="modal01"> 5 <div class="modal-slider"> 6 <div class="modal-item"><img src="01.png"></div> 7 <div class="modal-item"><img src="01-2.png"></div> 8 <div class="modal-item"><img src="01-3.png"></div> 9 </div> 10 <!--/.modal--></div> 11 <div class="gallery-item"><a rel="leanModal" href=”#modal02”></a><img src="02_thumb.png"></div> 12 <div class="modal" id="modal02"> 13 <div class="modal-slider"> 14 <div class="modal-item"><img src="02.png"></div> 15 <div class="modal-item"><img src="02-2.png"></div> 16 <div class="modal-item"><img src="02-3.png"></div> 17 </div> 18 <!--/.modal--></div> 19 <div class="gallery-item"><a rel="leanModal" href=”#modal03”></a><img src="03_thumb.png"></div> 20 <div class="modal" id="modal03"> 21 <div class="modal-slider"> 22 <div class="modal-item"><img src="03.png"></div> 23 <div class="modal-item"><img src="03-2.png"></div> 24 <div class="modal-item"><img src="03-3.png"></div> 25 </div> 26 <!--/.modal--></div> 27 </div> 28</div> 29

javascript

1function() { 2 // leanmodal 3 $( 'a[rel*=leanModal]').leanModal(); 4 5 // slick 6 $('.modal-slider').slick(); 7 8 // infinite scroll ※スクロール発動時に再度、leanmodalとslickを実行する 9 $('.gallery').infinitescroll({ 10 navSelector : ".pager", 11 nextSelector : ".pager a.next", 12 itemSelector : ".gallery-list", 13 },function() { 14 // ↓読み込み後のためのmodalの記述。正常に動いてます 15 $( 'a[rel*=leanModal]').leanModal(); 16 },function() { 17 // ↓読み込み後のためのslickの記述。問題があるとするとここでしょうか?。。 18 $('.modal-slider').slick(); 19 },1000); 20});

途中に記述してますが、slickの実行タイミングを少し遅らせたり、もやっています。
全くお手上げ状態なので、どなたか分かる方もしくはヒントになるものでもご教示いただけますと幸いです。

宜しくお願いします。

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

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

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

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

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

Lhankor_Mhy

2018/06/07 07:23

『2,3枚目は一旦非表示になるはず』とのことですが、その「一旦非表示にする」部分のコードをご提示いただけますか?
waon

2018/06/08 04:54

回答ありがとうございます。非表示という表現が違いましたね。実際のものをXサーバーの無料サーバーにアップしてみました。 http://test1806.html.xdomain.jp/
waon

2018/06/08 04:56

実際の該当部分はスライダーとして、2枚目以降は overflow:hidden で表示領域外は隠れている状態になるはずなのですが、それが機能せず縦並びのままになってしまっている、状況です。
waon

2018/06/08 04:58

サムネイルクリックをトリガーとする、というのも出来るものなのでしょうか。。
Lhankor_Mhy

2018/06/08 07:03

ちらっと試した感じ、`slider.slick('unslick');`で一回壊してからもう一度初期化したら上手くいきそうな感じがしました。infinitescrollの仕様がわからないので動作するか確証が持てず、回答ではなくてコメントで。
waon

2018/06/08 07:45

コメントありがとうございます。なるほど、初期化という方法があるんですね、勉強してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問