Question

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

这就是我所拥有的：

首先，我在post循环中添加了库。我使用帖子ID创建一个独特的Galleria ID。我还使用第二个类名将图像比率传递给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>

这适用于第一组图库但是当无限滚动加载更多帖子时，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画廊无限滚动后无法正确加载

1 个答案: