Infinite Scrollを使った無限スクロール版「8cm×12cmの小さなアート」

無限スクロールを実現するJavaScript「Infinite Scroll」を「8cm×12cmの小さなアート」で試してみた。

https://ok2nd.sakura.ne.jp/art/infinite/

<div id="contents">
    <div id="gallery">
        <a class="img"><span style="background-image: url('../thumbs/a001.jpg')"></span></a>
        <a class="img"><span style="background-image: url('../thumbs/a002.jpg')"></span></a>
        .....
        <nav id="page-nav" style="display:none;">
            <a href="index.php?p=2"></a>
        </nav>
    </div>
</div>
<script>
$(function(){
    var $container = $('#gallery');
    $container.infinitescroll(
        {
            navSelector: '#page-nav',
            nextSelector: '#page-nav a',
            itemSelector: '.img, .popImg',
            loading: {
                finishedMsg: '',
                img: ''
            }
        }
    );
});
</script>

ローディング画像など、余分なものは出さないようにしている。

1点だけ問題があった。永久に無限ループしてしまう。
次々に読み込んでいくページを、次のようにPHPで自動生成している。
index.php?p=2
index.php?p=3
index.php?p=4
...
各ページのHTMLでは、次に読み込むページを、次のように指定する。

<nav id="page-nav" style="display:none;">
    <a href="index.php?p=2"></a>
</nav>

最後のページでは、このナビゲーションを外すようにしても効果なし。PHPページの引数(?p=xxx)が最後のページを超えたら何もHTMLを返さないようにして解決。

<?php
if ($page_current > $page_end) {
    exit();
}
?>

使っている「Infinite Scroll」は最新版ではない。version 2.0b2.110713を使用。

--------

合わせて、サムネイル画像クリックによる大きな画像のポップアップ機能追加で嵌まったので備忘録。

ポップアップ画像をdisplay:none;にしておいて、onclick()でdisplay:''にして画像表示するところはうまくいくが、そのポップアップ画像クリックでポップアップ画像をdisplay:none;で消すのが出来なかった。

<script>
var popupNo = '';
function popupImage(no) {
    if (popupNo != '') {
        $('#'+popupNo).css('display','none');
    }
    popupNo = no;
    $('#'+no).css('display','');
}
function popupOff(no) {
    $('#'+no).css('display','none');
    popupNo = '';
}
</script>

Infinite ScrollのitemSelectorで指定する追加要素のセレクタclass="img"の内側にポップアップ画像を入れているとうまくいかない。セレクタ"img"の外側にポップアップ画像を出すことでうまくいく。この場合、itemSelectorで指定する追加要素を'.img, .popImg'と２つ指定してやる事。

【うまくいかない方法】

<a class="img" onclick="popupImage('001')">
    <img class="popImg" id="001" src="../art/a001.jpg"
        style="display: none;" onclick="popupOff('001')">
    <span style="background-image: url('../thumbs/a001.jpg')"></span>
</a>

【うまくいく方法】

<a class="img" onclick="popupImage('001')">
    <span style="background-image: url('../thumbs/a001.jpg')"></span>
</a>
<img class="popImg" id="001" src="../art/a001.jpg"
    style="display: none;" onclick="popupOff('001')">

サムネイル画像クリックによる大きな画像のポップアップでは、

http://rgrg.blog61.fc2.com/blog-entry-593.html
のJavaScriptを使った別バージョンも作成。

https://ok2nd.sakura.ne.jp/art/infinite-b/

この場合のHTMLは以下。

<div id="contents">
    <div id="gallery">
        <a class="img" onclick="popupImage('../art/a001.jpg')">
        <span style="background-image: url('../thumbs/a001.jpg')"></span></a>
        <a class="img" onclick="popupImage('../art/a002.jpg')">
        <span style="background-image: url('../thumbs/a002.jpg')"></span></a>
        .....
        <nav id="page-nav" style="display:none;">
            <a href="index.php?p=2"></a>
        </nav>
    </div>
</div>>

【もう一つの備忘録】

ページをスクロールしても、ポップアップ画像を画面中央にするためには、CSSのpositionを'absolute'でなく'fixed'にする。