1

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

我尝试使用不同的分组名称，例如rel="lightbox-page1"and rel="lightbox-page2，或者根本没有分组，但没有一种方法有效。加载新页面时是否需要刷新Slimbox？InfiniteScroll 的创建者建议使用以下代码 myLightbox.updateImageList();。说得通？如何将其转换为 Slimbox？2011年和我有同样问题的人。

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

<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>
4

0 回答 0