CODEWITHSUNDEEP
jqueryfancyboxfancybox-2
jlmmns
jlmmns

Reputation: 845

How to refresh Fancybox content when closed?

Is there a way to reset the fancybox instance or refresh the contents of it, when closed? Note that it grabs content from a div on the same page.

I want it to display the content like it was first loaded into the dom, when re-opening the fancybox.

I guess this is more of a javascript/jQuery thing, than a Fancybox thing, right?

$.fancybox.open({
    href: '#popup',
    padding: 0,
    autoWidth: true,
    arrows: false,
    closeBtn: false,
    scrollOutside: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.5)'
            },
            locked: false
        }
    },
    afterClose: function() {
        // Reset or refresh here
    }
});

Upvotes: 0

Views: 5165

Answers (1)

Nick Tomlin
Nick Tomlin

Reputation: 29251

It depends on the sort of changes you are making to the target div, but you will not be able to "reset" them without reloading the page, or performing a funky Ajax call to the page and getting the div contents from there.

The simplest way of getting around this would be to store the markup of that div in a variable (using jQuery's html(), and "reset" that div using the variable in your afterClose() callback.

JS

var content = $('#popup').html(); // store content on documentReady()

$.fancybox.open({
    href: '#popup',
    padding: 0,
    autoWidth: true,
    arrows: false,
    closeBtn: false,
    scrollOutside: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.5)'
            },
            locked: false
        }
    },
    afterClose: function(){
        $('#popup').html(content);
    }
});

It might be best to use fancybox's beforeLoad callback, in conjunction with this, to do this for all of your content, but as you seem to be loading a single div, this should work.

Upvotes: 1

Related Questions