Question

我正在使用Pixelunion的Fantastic扩展照片插件，以及保罗爱尔兰的无限卷轴，它工作正常。

除了一件事，我在脚本上做的自定义（禁用圆角）在第二页通过无限滚动加载后不会继续。（它恢复为默认值）

我的回调如下：

<script type="text/javascript">
        $(document).ready(function(){
            $('#content').infinitescroll({ 
                navSelector : "div.navigation",
                nextSelector : ".navigation a#next",
                itemSelector : ".entry", 
                bufferPx : 50,
                extraScrollPx: 0,    
                loading: {
                    finished: undefined,
                    finishedMsg: "Congratulations, you've reached the end of the      internet.",
                    img: "http://static.tumblr.com/8je4mhi/aLbmpfjp5/1.gif",
                    msg: null,
                    msgText: "",
                    selector: null,
                    speed: 'slow',
                    start: undefined
                },
                behavior: 'twitter',
            },function(newElements){                    
                $(newElements).find('.photo-slideshow').pxuPhotoset();
            });
        });
        </script>

我的pxu照片脚本看起来像这样：

    <script type="text/javascript">
        $(document).ready(function() {
            $('.photo-slideshow').pxuPhotoset({
                'ligthbox'  : true,
                'highRes'   : true,
                'rounded'   : 'false',
                'exif'      : false,
                'captions'  : false,
                'gutter'    : '100px',
                'photoset'  : '.photo-slideshow',
                'photoWrap' : '.photo-data',
                'photo'     : '.pxu-photo'
            }, function() {
                // callback
            });
        });
    </script>

如果我更改了实际插件文件中的默认值，一切都有效，但我更愿意通过脚本动态更改它们。有谁知道这是否可行？

更新：

所以这完全合情合理，我没有意识到这一点。那么我会像这样添加变量吗？

    <script type="text/javascript">
        $(document).ready(function() {
            $('.photo-slideshow').pxuPhotoset({
                var photosetOptions = {
                'ligthbox'  : true,
                'highRes'   : true,
                'rounded'   : 'false',
                'exif'      : false,
                'captions'  : false,
                'gutter'    : '10px',
                'photoset'  : '.photo-slideshow',
                'photoWrap' : '.photo-data',
                'photo'     : '.pxu-photo'
            }, function() {
                // callback
            });
        });
        });
    </script>

更新＃2

所以我觉得我明白了......我把变量放在我的无限滚动插件之前？

<script type="text/javascript">

        var photosetOptions = {
            'ligthbox'  : true,
            'highRes'   : true,
            'rounded'   : 'false',
            'exif'      : false,
            'captions'  : false,
            'gutter'    : '10px',
            'photoset'  : '.photo-slideshow',
            'photoWrap' : '.photo-data',
            'photo'     : '.pxu-photo'
        };

        $(document).ready(function(){
            $('#content').infinitescroll({ 
                navSelector : "div.navigation",
                nextSelector : ".navigation a#next",
                itemSelector : ".entry", 
                bufferPx : 50,
                extraScrollPx: 0,    
                loading: {
                    finished: undefined,
                    finishedMsg: "Congratulations, you've reached the end of the internet.",
                    img: "http://static.tumblr.com/8je4mhi/aLbmpfjp5/1.gif",
                    msg: null,
                    msgText: "",
                    selector: null,
                    speed: 'slow',
                    start: undefined
                },
                behavior: 'twitter',
            },function(newElements){                    
                $(newElements).find('.photo-slideshow').pxuPhotoset(photosetOptions);
            });
        });
    </script>

如果我把它放在错误的顺序或某事中，请纠正我......但这似乎有效！

Answer 1

只需再次调用pxuPhotoset()即可让插件使用默认设置。每次调用函数时都需要设置选项（因为理论上，你可以使用不同的照片使用不同的选项）。

您要做的是将选项保存在单个变量中，然后使用它。看起来应该是这样的：

var photosetOptions = {
  'lightbox' : true,
  'highres'  : true

  /* etc */
};

然后您的所有选项都存储在一个地方，您需要做的就是调用这样的函数：

$('.photo-slideshow').pxuPhotoset(photosetOptions);

更新

总而言之，使用您的选项，代码看起来像这样：

var photosetOptions = {
    'ligthbox'  : true,
    'highRes'   : true,
    'rounded'   : false,
    'exif'      : false,
    'captions'  : false,
    'gutter'    : '100px',
    'photoset'  : '.photo-slideshow',
    'photoWrap' : '.photo-data',
    'photo'     : '.pxu-photo'
};

$('.photo-slideshow').pxuPhotoset(photosetOptions);

Pixelunion Extended Photosets在第一页后恢复默认设置（无限滚动）

1 个答案:

更新