無限スクロールを実装したい

前提・実現したいこと

Tumblrにてポートフォリオサイトを制作したく、見やすさのためにjQueryのinfinite-scroll（無限スクロール）を実装したいと考えています。jQueryだけでなくJavaScriptの知識すらほとんどありませんが、何としてでも実装したいと思っています。

なお、以下二つのサイトを参考にしました。

https://on-ze.com/archives/2486#i
https://creativeweb.jp/Manga/tumblr/page6

発生している問題・エラーメッセージ

動作確認にてどちらも読み込みには成功しているそうなのですが、『Next』ボタンを押してみても通常通りページ遷移されてしまい、うまくいきません。

エラーメッセージなどは表示されず、infinite-scroll実装なしと全く変わらない状況です。

該当のソースコード

html
1
2<!--前略-->
3
4<script src="https://static.tumblr.com/wpbpbhk/FRFqk2fty/jquery-3.5.1.min.js"></script>
5 <script src="https://static.tumblr.com/wpbpbhk/Sqgqk1h56/infinite-scroll.pkgd.min.js"></script>
6
7
8 <script>
9$(function(){
10	$('#wrapper').infinitescroll({
11		navSelector : ".pagination",
12　　　　　nextSelector : ".next-btn a",
13		itemSelector : "#contents"
14	});
15});</script>
16
17
18</head>
19<body>
20
21<div id="wrapper">
22
23<!--中略-->
24
25       
26       <div class="grid-container">
27       {block:Posts}
28       <div id="contents"><!--itemSelectorに指定した#contents-->
29       <article class="grid">
30       <!-- post: 画像 -->
31          {block:Photo}
32              {LinkOpenTag}
33              <a href="{Permalink}">
34                <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="img-responsive lazyload"/></a>
35              {LinkCloseTag}
36              {block:Caption}
37                <div class="caption">
38                 {Caption}
39                </div>
40              {/block:Caption}
41          {/block:Photo}
42      
43    </div>
44    </article>
45    </div>
46          {/block:Posts}
47          </div>
48<!--ページネーション-->
49          <div class="pagination"><!--navSelectorに指定した.pagination-->
50          {block:Pagination}
51          {block:PreviousPage}
52          <div class="btn prev-btn"><a href="{PreviousPage}">≪ Prev</a></div>
53{/block:PreviousPage}
54{block:NextPage}<!--nextSelectorに指定した.next-btn-->
55<div class="btn next-btn"><a href="{NextPage}">Next ≫</a></div>
56{/block:NextPage}
57{/block:Pagination}
58</div>
59          {/block:IndexPage}
60          
61          
62          <!--後略-->
63         
64</body>
65</html>

試したこと

「$('#wrapper').infinitescroll({」の箇所を「$('#contents').infinitescroll({」に置き換えたり、
「navSelector : ".pagination"」から「navSelector : ".next-btn"」に置き換えたりなど試してみましたが、状況は全く変わりませんでした。

cerfweb

2020/11/20 09:34

htmlはテンプレートファイルのコピーではなく、実際に書き出されたものにした方が回答が得やすいと思いますよ。

行動規範の内容に同意します

回答1件

ベストアンサー

このライブラリ自体はよく知りませんが、参考にしているサイトと読み込んでいるJSが違うのではないでしょうか。
参考サイトは2015年ごろの情報のようなので、仕様が変わっている可能性があります。
ファイル名も参考サイトは「jquery.infinitescroll.min.js」ですが記載のコードは「infinite-scroll.pkgd.min.js」なので。

https://infinite-scroll.com/
公式サイトと思われるこちらでは、$('selector').infiniteScroll()と書かれており、Sが大文字です。

スクリプト系の開発時は、ブラウザのデベロッパーツールでConsoleタブを開いてエラーを確認するのが基本です。（わかりにくいことも多いですが）
tumblr.comのリソースを参照せず、本家から正式なものをダウンロードして使用したほうがいいと思いますよ。

投稿2020/11/20 14:50

gasbombe

総合スコア204

karin0823

2020/11/20 21:53

回答ありがとうございます。ファイル名が参考サイトと異なるのは少し気になってたので、あとでもう少し調べてみようと思います。あと、URLは本家からダウンロードしたファイルをTumblrにアップロードし使用しているものです。

karin0823

2020/11/20 23:18

公式サイトを参考にしてみたところ、できました！ navSelector : ".pagination", 　　　　　nextSelector : ".next-btn a", itemSelector : "#contents" から navSelector : ".pagination", 　　　　　path : ".next-btn a", append : ".grid-container" でうまくいきました。また、回答者様のご指摘のとおりinfiniteScroll()とSを大文字で表記してみました。本当にありがとうございました。

行動規範の内容に同意します