Pixelunion Extended Photosets revert to default settings after first page (with infinite scroll)

Question

I'm using Pixelunion's Fantastic extended photosets plugin, alongside paul irish's infinite scroll, and it works fine.

Except for one thing, The customization I did on the script (disabling the rounded corners) does not carry over after the second page loads via infinite scroll. (It reverts to default)

My callback looks like this:

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

And my pxu photosets script looks like this:

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

Everything works if I change the defaults in the actual plugin file, but I'd prefer to be able to change them on the fly via the script. Does anyone know if this is possible?

UPDATE:

So that makes complete sense, I didn't realize that. I would then just add the variable like this?

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

Update #2

So I think I get it.. I put the variable before my infinite scroll plugin like this?

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

Correct me if I put it in the wrong order, or something.. But this seems to work!

Answer 1

By simply calling pxuPhotoset() again you are letting the plugin use the defaults. The options need to be set every time you call the function (because you could, in theory, have different photosets use different options).

What you'll want to do is save your options in a single variable and use that instead. It should look something like this:

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

  /* etc */
};

Then all of your options are stored in one place and all you need to do is call the function like this:

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

Update

So altogether, using your options, the code would look like this:

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