将Slimbox（或Lightbox）与无限滚动集成

Question

我的个人照片库使用Masonry（用于排列照片）和Infinite scroll（用于分解照片的下载时间）。我最近添加了Slimbox2（因为我无法将Lightbox2用于某些原因）。 Slimbox2在第一页上完美运行，但在无限滚动加载的后续页面上没有。

我尝试使用不同的分组名称，例如rel="lightbox-page1"和rel="lightbox-page2，或者根本没有分组，但没有一种方法可行。加载新页面时是否需要刷新 Slimbox？ InfiniteScroll的创建者suggests the following code myLightbox.updateImageList();。说得通？如何将其转换为Slimbox？ Someone with the same problem as I do, in 2011.

您可以查看我的实时问题 here。这些是我目前正在使用的脚本（您可以查看页面源代码）：

<script>
        $(function() {

            var $container = $('#gallery');

            $container.imagesLoaded(function() {
                $container.masonry({
                    itemSelector : '.box',
                    columnWidth : 1,
                    isAnimated : true
                });
            });

            $container.infinitescroll({
                navSelector : '#page-nav', // selector for the paged navigation
                nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
                itemSelector : '.box', // selector for all items you'll retrieve
                loading : {
                    finishedMsg : 'No more pages to load.',
                    img : '/assets/img/loading.gif'
                }
            },
            // trigger Masonry as a callback
            function(newElements) {
                // hide new items while they are loading
                var $newElems = $(newElements).css({ opacity : 0 });
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function() {
                    // show elems now they're ready
                    $newElems.animate({ opacity : 1 });
                    $container.masonry( 'appended', $newElems, true );
                });
            });
        });
    </script>