0

我正在使用 Pixelunion 的 Fantastic 扩展照片集插件，以及 paul irish 的无限滚动，它工作正常。

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

我的回调如下所示： 

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

如果我把它按错误的顺序纠正我，或者什么..但这似乎有效！

4

1 回答 1

0

只需再次调用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);
于 2013-07-05T03:01:22.973 回答