Change base, gutter and columns settings and refresh layout

[HriBB]

How can we change gridly settings after initialization?

For now I have created an override:

Gridly.prototype.refresh = function(params) {
    if (params.length === 1) {
        $.extend(this.settings, params[0]);
    } else if (params.length === 2) {
        this.settings[params[0]] = params[1];
    }
    var b = this.settings.base;
    this.$('> *').width(b).data('width', b).height(b).data('height', b);
    return this.layout();
};

Then my code looks like this

// base settings
var brickWidth = 250;
var gutter = 10;

// get initial gridly settings
var gridly = $.extend(true, {}, getGridlySettings(), {
    callbacks: {
        reordered: reorderImages
    }
});

// dynamically resize images
$('.gridly .brick').width(gridly.base).height(gridly.base);

// initialize gridly
$('.gridly').gridly(gridly);

// refresh gridly
function refreshGridly() {
    $('.gridly').gridly('refresh', getGridlySettings()); // <====== HERE
}

// get calculated gridly settings
function getGridlySettings() {
    var gridWidth = $('.gridly').width();
    var columns = Math.round(gridWidth / (brickWidth + gutter));
    var base = Math.round((gridWidth - (gutter * columns)) / columns);
    return {
        base: base,
        gutter: gutter,
        columns: columns
    };
}

$(window).resize(function(){
    // buffer execution by 50ms
    // this way we dont do multiple resizes
    // if user keeps resizing browser window
    clearTimeout(timeout);
    timeout = setTimeout(refreshGridly, 50);
});

[rojr]

I know this is old, but you solved an issue I was having. Thanks @HriBB !

[adelriosantiago]

The code above works fine although it makes all bricks the same size. I came up with a slightly different solution based on yours:

        //Gridly
        var gBase = 60, gGutter = 20, timeout; //Gridly settings and refresh timeout

        //Reload gridly
        function refreshGridly() {
            var lastGridly = $('.gridly').clone();
            
            lastGridly.removeAttr('style');
            $('.gridly-container').empty().append(lastGridly);

            $('.gridly').gridly({
                base: gBase,
                gutter: gGutter,
                columns: Math.floor($(window).width() / (gBase + gGutter))
            });
        }

        $(window).resize(function(){
            clearTimeout(timeout);
            timeout = setTimeout(refreshGridly, 50);
        });

This basicalle clones the current Gridly and restarts it keeping the brick "small" and "large" sizes.

[felipepassion]

The code above works fine although it makes all bricks the same size. I came up with a slightly different solution based on yours:

        //Gridly
        var gBase = 60, gGutter = 20, timeout; //Gridly settings and refresh timeout

        //Reload gridly
        function refreshGridly() {
            var lastGridly = $('.gridly').clone();
            
            lastGridly.removeAttr('style');
            $('.gridly-container').empty().append(lastGridly);

            $('.gridly').gridly({
                base: gBase,
                gutter: gGutter,
                columns: Math.floor($(window).width() / (gBase + gGutter))
            });
        }

        $(window).resize(function(){
            clearTimeout(timeout);
            timeout = setTimeout(refreshGridly, 50);
        });

This basicalle clones the current Gridly and restarts it keeping the brick "small" and "large" sizes.

elegant, but simple. thanks!