无限滚动后画廊无法正确加载

Question

我有一个基于 WordPress 的网站，有几百个 posts。每个 post 最多包含 10 张图像。 Infinite Scroll 用于自动加载更多 posts。我想要的是主页成为图片库的页面；每 post 个。

这是我的资料：

首先，我在 post 循环中添加画廊。我使用 post ID 创建一个唯一的 Galleria ID。我还使用第二个 class 名称将图像比例传递给 JS（确定有更好的方法吗？）：

<div id="galleria-1609" class="galleria 0.5">
    <a href="img01-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a>
    <a href="img02-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a>
</div>

...然后添加 javascript...

<script>
    Galleria.run('#galleria-1609', {
        thumbnails: 'numbers',
        height: 0.5, /* ratio */
        preload: 1
    });
</script>

这对于第一组画廊来说效果很好，但是当无限滚动加载更多 post 时，javascript 会被删除。经过一番搜索，我发现 Infinite Scroll 有一个回调函数，可以访问新元素数组。

所以我在从无限滚动回调调用的函数中尝试了这段代码：

function loadSliders(arrayOfNewElems) {
    $(arrayOfNewElems).each(function( i ) {
        var newGal = $(this).find('.galleria');
        //extract ratio from 2nd class name:
        var ratio = $(newGal).attr('class').split(' ')[1];
        var thisID = '#'+ $(newGal).attr('id');

       Galleria.run(thisID, {
            thumbnails: 'numbers',
            height: ratio,
            preload: 1
        });
    });
}

这确实加载了一组更多的画廊，但在出现此错误后失败：

TypeError: $(...).attr(...) is undefined

关于我为什么会收到此错误的任何想法或实现此错误的更好方法？

Answer 1

解决了。对于其他陷入类似问题的人。这就是我最终得到的：

HTML:

<div id="galleria-1609" class="galleria" data-ratio="0.5">
    <a href="img01-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a>
    <a href="img02-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a>
</div>

JS:

function loadSliders(arrayOfNewElems) {
    $(arrayOfNewElems).each(function( i ) {
        $(this).find('.galleria').each(function( j ) {
            //var ratio = $(this).attr('class').split(' ')[1];
            //improved method:
            var ratio = $(this).data('ratio');
            var thisID = '#'+ $(this).attr('id');       
            Galleria.run(thisID, {
                    thumbnails: 'numbers',
                    height: ratio,
                    preload: 1
                });
        });
    });
}

已更新以显示 HTML5 数据属性，如我评论中所述。

无限滚动后画廊无法正确加载

Galleria Galleries Not Loading Correctly After Infinite Scroll

wordpress

jquery

galleria

infinite-scroll